jquery.validate validating disabled field

Question

I have a drop down in a form which controls which fields will be enabled/disabled on the form using jQuery's .show() and .hide(). In my jquery.validate rules, I have all the fields as required.

This is what my jquery.validate rule looks like

$("#new_course").validate({
ignore: ":disabled",
rules: {
"course_init_on": {required: true},
"mins_before": {required: true},
    .....

With the code, above it still validates the field that are hidden and stops the form from submitting.

Answer 1

What I can see is that you have added ignore ":disabled" which is different than ":hidden"

I think you should use:

$("#new_course").validate({
ignore: ":hidden",
...

Answer 2

Disabled is not checked in validate.js (hardcoded):

elements: function() {
            var validator = this,
                rulesCache = {};

            // select all valid inputs inside the form (no submit or reset buttons)
            return $(this.currentForm)
            .find("input, select, textarea")
            .not(":submit, :reset, :image, [disabled]");
          }

You have to use readonly attribute instead

Answer 3

If you really want to disable the form elements (which you probably should else the browser will post that data) use the following:

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

Then the above code will work perfectly and you wont be posting unnecessary data to the server :)

Answer 4

Try:

$("#new_course").validate({
ignore: ":hidden",
rules: {
"course_init_on": {required: true},
"mins_before": {required: true},
    .....