jQuery validation validates disabled input fields

Question

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");
    }
});

Can you elaborate on this fiddle: jsfiddle.net/mplungjan/SjH4A — mplungjan
– mplungjan, Commented Sep 10, 2013 at 6:24
@mplungjan Thanks for responding, please check out the update jsfiddle.net/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
– Chris, Commented Sep 10, 2013 at 7:47

mplungjan · Accepted Answer · 2013-09-10 08:02:32Z

4

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");
    }
});

edited Sep 10, 2013 at 8:02

answered Sep 9, 2013 at 15:05

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chris Over a year ago

If I remove all validation customisation it still has the same issue

Chris Over a year ago

See the first code block on my question, yes I do! It is odd indeed as I thought this was standard behaviour :/ .prop("disabled", !$(this).prop("checked"))

Chris Over a year ago

Ah that works! There is one niggling issue, the error icon (my custom placed one) doesnt get removed even though the input box gets its error class removed

mplungjan Over a year ago

can you call val.unhighlight() ?

Chris Over a year ago

I literally just did this in the checked handler function $("#clientConfigurationForm .validationResult").remove();

Collectives™ on Stack Overflow

jQuery validation validates disabled input fields

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related