jQuery 错误计数的验证编号

Question

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

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

这是我的 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。

But I am not getting when the user enter the value in the corresponding field the error count has to detect one by one for example If I have 5 fields are not entered by the user it should say You have missed 5 fields.

您使用了错误的选项。 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();
    },

Please fill before submitted. when all fields are entered the error field has to disable.

您忘记在没有错误的情况下隐藏错误消息框：$(".error_msge").hide() was missing

And I need to highlight the label of the radio input when nothing is selected.

您需要 highlight 和 unhighlight 函数中的条件，当 element 是 radio.

时，它将处理此问题

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

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

More over I am trying to change my mandatory star from black to red.

您的 CSS 技术有缺陷。您正在尝试使用 "black" class select 一切，然后简单地添加一个 "red" class，留下两个 class，每个都有一个不同的颜色。相反，您需要将一个 class 替换为另一个 class。像这样...

$(".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/

jQuery 错误计数的验证编号

jQuery validation no of error count number

html

javascript

css

jquery

jquery-validate