I have set up validation for my form using jQuery validation. The unfortunate thing is that at some points I want to call $("#clientConfigurationForm").valid() to force re-evaluation when a user enables / disables a check box. I want input forms that are currently invalid to be ignored (and lose the validation state) when they are disabled and .valid() is called. Currently this isnt happening. How can I get this to work?

Checkbox events

$("#clientConfigurationForm").on("change","input[type=checkbox]",function(){
    $(this)
        .closest("div")
        .find("input, select")
        .not(this)
        .not(":submit")
        .prop("disabled", !$(this).prop("checked"))
        .each(function(){
            $(this).valid();
        });
});

Validation Code

$("#clientConfigurationForm").validate({
    onkeyup: function (element) {
        $(element).valid();
    },
    focusInvalid: false,
    invalidHandler: function(form, validator) {
        if (!validator.numberOfInvalids())
            return;

        // Find out what my ID is
        var formIndex = $(validator.errorList[0].element).prop("id").replace(/[A-Za-z]+/g, '');
        $("#clientSettingsLinks a").eq(formIndex).trigger("click");
    },
    errorPlacement: function (error, element) {
        var parent = $(element).parent();
        var validationContainer = parent.find(".validationResult");

        if (validationContainer.length == 0){
            validationContainer = $('<span class="validationResult"><i class="'+errorIconClass+' inputValidationIcon"></i></span>');
            parent.append(validationContainer);
        }

        validationContainer.addClass("tooltip").attr("title", error.text());
    },
    highlight: function (element, errorClass, validClass) {
        $(element).parent().find("i").removeClass("icon-ok").addClass(errorIconClass);

        $(element).addClass("error");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parent().find("i").removeClass(errorIconClass).addClass("icon-ok");
        $(element).parent().find("span.validationResult.tooltip").removeClass("tooltip").attr("title", "");

        $(element).removeClass("error");
    },
    submitHandler: function(form) {
        alert("SUBMITTED YO");
    }
});

I have set up validation for my form using jQuery validation. The unfortunate thing is that at some points I want to call $("#clientConfigurationForm").valid() to force re-evaluation when a user enables / disables a check box. I want input forms that are currently invalid to be ignored (and lose the validation state) when they are disabled and .valid() is called. Currently this isnt happening. How can I get this to work?

Checkbox events

$("#clientConfigurationForm").on("change","input[type=checkbox]",function(){
    $(this)
        .closest("div")
        .find("input, select")
        .not(this)
        .not(":submit")
        .prop("disabled", !$(this).prop("checked"))
        .each(function(){
            $(this).valid();
        });
});

Validation Code

$("#clientConfigurationForm").validate({
    onkeyup: function (element) {
        $(element).valid();
    },
    focusInvalid: false,
    invalidHandler: function(form, validator) {
        if (!validator.numberOfInvalids())
            return;

        // Find out what my ID is
        var formIndex = $(validator.errorList[0].element).prop("id").replace(/[A-Za-z]+/g, '');
        $("#clientSettingsLinks a").eq(formIndex).trigger("click");
    },
    errorPlacement: function (error, element) {
        var parent = $(element).parent();
        var validationContainer = parent.find(".validationResult");

        if (validationContainer.length == 0){
            validationContainer = $('<span class="validationResult"><i class="'+errorIconClass+' inputValidationIcon"></i></span>');
            parent.append(validationContainer);
        }

        validationContainer.addClass("tooltip").attr("title", error.text());
    },
    highlight: function (element, errorClass, validClass) {
        $(element).parent().find("i").removeClass("icon-ok").addClass(errorIconClass);

        $(element).addClass("error");
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parent().find("i").removeClass(errorIconClass).addClass("icon-ok");
        $(element).parent().find("span.validationResult.tooltip").removeClass("tooltip").attr("title", "");

        $(element).removeClass("error");
    },
    submitHandler: function(form) {
        alert("SUBMITTED YO");
    }
});

• javascript
• jquery
• jquery-validate

• Can you elaborate on this fiddle: jsfiddle/mplungjan/SjH4A – mplungjan Commented Sep 10, 2013 at 6:24
• @mplungjan Thanks for responding, please check out the update jsfiddle/SjH4A/1 - if you notice that if you make the validation fail in the input box then tick the checkbox to disable it, the validation isnt removed. – Chris Commented Sep 10, 2013 at 7:47

1 Answer 1

Documentation: Inputs of type submit and reset are always ignored, so are disabled elements.

However it seems you have found something weird.

This works

Live Demo

var val;
$("#clientConfigurationForm").on("change", "input[type=checkbox]", function () {
    val.resetForm();
    $(this)
        .closest("div")
        .find("input, select")
        .not(this)
        .not(":submit")
        .prop("disabled", !$(this).prop("checked"))
        .not(":disabled")  
        .each(function () {
          $(this).valid();
        });
});

val = $("#clientConfigurationForm").validate({

    onkeyup: function (element) {
        $(element).valid();
    },
    focusInvalid: false,
    submitHandler: function (form) {
        alert("submitted");
    }
});