javascript - jQuery 验证验证禁用的输入字段

Question

我已经使用 jQuery 验证为我的表单设置了验证。不幸的是，在某些时候我想调用 $("#clientConfigurationForm").valid() 以在用户启用/禁用复选框时强制重新评估。我希望当前无效的输入表单在被禁用并调用 .valid() 时被忽略(并失去验证状态)。目前这没有发生。我怎样才能让它发挥作用？

复选框事件

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

验证码

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

Answer 1

Documentation: 提交和重置类型的输入始终被忽略，禁用元素也是如此。

不过你似乎发现了一些奇怪的东西。

这行得通

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