jQuery验证错误计数编号

Question

我目前正在研究 jQuery 验证；我当前的代码工作正常，我得到了错误计数。但是当用户在相应字段中输入值时，我没有得到错误计数必须一一检测。

例如，如果我有 5 个字段不是用户输入的，它应该说 您错过了 5 个字段。请在提交前填写 当所有字段都输入时，错误字段必须禁用。当没有选择任何内容时，我需要突出显示无线电输入的标签。此外，我正在尝试将我的强制星星从黑色更改为红色。这也没有发生。

这是我的 jQuery 代码。

$(document).ready(function () {
$("#basicForm").validate({

    invalidHandler: function(event, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
          var message = errors == 1
            ? 'You missed 1 field. It has been highlighted'
            : 'You have missed ' + errors + ' fields. Please fill before submitted.';
          $("#error_message").html(message);
          $(".error_msge").show();
          $("div.error").show();
            $("#error_message").addClass("error_msge");
        } else {
          $("div.error").hide();
            $("#error_message").removeClass("error_msge");
        }
      },

    errorPlacement: function(error, element) {
    },
    onkeyup: false,
    highlight: function(element) {
        $(element).addClass('errRed');
        $(element).addClass('text-error-red');
    },
    unhighlight: function(element) {
        $(element).removeClass('errRed');
        $(element).removeClass('text-error-red');
    },
    rules: {
        txt_Fname: "required",
        txt_lname: "required",
        txt_Mfname: "required",
        txt_Mlname: "required",
        txt_Pptnum: "required",
        txt_Pi: "required",
        txt_dob: "required",
        txt_Idt:"required",
        txt_Epdt:"required",
        sel_ms:"required",
        ipt_nation:"required",
        ipt_countryres:"required",            
        sel_rg:"required",
        sel_sem:"required",
        ipt_acdem:"required",
        gender:"required"
    }
});
});

这里是Fiddle link。

Answer 1

你有很多问题，我强烈建议你review the documentation。

但是当用户在相应字段中输入值时，我没有得到错误计数必须一一检测，例如如果我有 5 个字段没有被用户输入，它应该说你错过了 5 个字段。

您使用了错误的选项。 invalidHandler 仅在无效表单上触发，因此当错误为零时，您的函数将永远不会被调用，并且会卡在显示“1 错误”上。请改用the showErrors option。

    showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();
        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
            $("#error_message").html(message);
            $(".error_msge").show();
            //$("div.error").show(); // superfluous
            //$("#error_message").addClass("error_msge"); // superfluous
        } else {
            $(".error_msge").hide();
            //$("div.error").hide(); // superfluous
            //$("#error_message").removeClass("error_msge"); // superfluous

        }
        // ensures that highlight/unhighlight will function
        this.defaultShowErrors();
    },

请在提交前填写。当输入所有字段时，必须禁用错误字段。

没有错误时忘记隐藏错误消息框：$(".error_msge").hide() 丢失

当没有选择任何内容时，我需要突出显示无线电输入的标签。

当element 是radio 时，您需要在highlight 和unhighlight 函数中处理这个问题。

    highlight: function (element) {
        if ($(element).is(':radio')) {
            $(element).siblings('label').addClass('errRed');
        } else {
            $(element).addClass('errRed');
        }
        $(element).prev('span.required-star').addClass('text-error-red').removeClass('text-error-black');
    },
    unhighlight: function (element) {
        if ($(element).is(':radio')) {
            $(element).siblings('label').removeClass('errRed');
        } else {
            $(element).removeClass('errRed');
        }
        $(element).prev('span.required-star').addClass('text-error-black').removeClass('text-error-red');
    }

我还将星号的代码移到此处，因为您希望它们单独切换颜色。

此外，我正在尝试将我的强制星号从黑色更改为红色。

您的 CSS 技术有缺陷。您正在尝试使用“黑色”类选择所有内容并简单地添加一个“红色”类，从而为您留下两个类，每个类都有不同的颜色。相反，您需要将一个类替换另一个类。像这样的...

$(".required-star").removeClass("text-error-red").addClass("text-error-black");

当您使用日期选择器时，您需要使用.valid() 方法以编程方式触发验证...

$('.ipt_Field').on('change', function() {
    $("#basicForm").valid();
});

您不需要messages 选项。由于您正在压制所有消息，因此毫无意义。

也不要将errorPlacement 函数留空。在里面放一个return false。

errorPlacement: function() {
    return false; // suppress error messages.
}

演示：http://jsfiddle.net/k5wxtmpL/