JQuery Validation Plugin Does Not Perform Element Validation Even When Elements Are Disabled

Question

HTML snippet example:

<select name="paytitle" id="paytitle">
    <option value="Budget Keeper" selected>Budget Keeper</option>
    <option value="Bookkeeper">Bookkeeper</option>
    <option value="Treasurer">Treasurer</option>
    <option value="Accounts Payable">Accounts Payable</option>
    <option value="Other">Other</option>
</select>
<div id="otherfield">Other: <input name="paytitleother" type="text" id="paytitleother" class="required" /></div>

I have a function that disables and hides the paytitleother field based on the select value:

$('#paytitle').change(function() {
    if ($(this).val() == 'Other')
    {
        $("#paytitleother").removeAttr("disabled");
        $("#otherfield").css("display", "block");
    } else {
        $("#paytitleother").attr("disabled", true);
        $("#otherfield").css("display", "none");
    }
});

When I try to submit the form, the paytitleother field still fails validation, even if it is disabled and hidden. Check plugin status documentation: all disabled fields are ignored automatically, but I added an additional step to add ignore: ":disabled"to the check procedure:

$('#fieldForm').validate({
    ignore: ':disabled',
    ...
});

Even with this specification, field validation is not performed. I’ve been working on this project all day, so maybe I’m missing something simple, but I don’t see it and I can’t understand what is happening with my life.

Answer 1

disabled, "" true, :

$("#paytitleother").attr("disabled", "disabled");

jQuery .attr() , , "disabled" HTML 4 XHTML HTML5.