jQuery - can I validate a disabled field?

Question

I've got a form where the user needs to click a link, select a user via a popup window which then populates a hidden field with an ID and a display field with the username.

The display field is set to disabled="disabled" to force the user to use the popup and not type a value in the field.

I need to ensure the user selects a name. I'm using jQuery and Jorn's validation plugin.

Doing a required: true on the disabled field doesn't seem to fire off if the value is blank.

Any ideas how to solve this?

Answer 1

Instead of making it disabled, have you tried making it readonly?

<input type="text" readonly="readonly" />

I remember from years ago that disabled fields are not submitted by forms, and hence probably are not validated

Here is the W3C HTML4 Spec on the topic.

Answer 2

According to the previous suggestion the possible solution could be:

var _valid = $.fn.valid;
$.fn.valid = function (alsoDisabled) {
    var alsoDisabled = alsoDisabled || false;
    if (alsoDisabled) {
        this.find('[disabled]').prop('disabled', false);
    }
    var retVal = _valid.apply(this);
    if (alsoDisabled) {
        this.find('[disabled]').prop('disabled', true);
    }
    return retVal;
};

and so you could call the valid method with the optional arguments: $('#form').valid(true) to check also disabled field or $('#form').valid() for the normal behaviour

best regards Gaetano