不显眼的验证：当所有字段都有效时隐藏验证摘要

Question

使用不显眼的验证，当所有表单字段都有效时，我无法使摘要错误范围消失。

我准备了一个文件示例，因为生产代码是更复杂的 MVC5 解决方案的一部分：

<head>

    <script src="jquery-3.1.1.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="jquery.validate.unobtrusive.js"></script>

    <style type="text/css">
        .input-validation-error { background-color:Red;}
        .validation-summary-valid { display:none; }
        .validation-summary-errors { display:block; }
    </style>

</head>

<body>

    <script>

        $(function(){
            var vsettings = $.data($('form')[0], 'validator').settings;
            vsettings.onkeyup = false;
            vsettings.onfocusout = false;
            vsettings.showErrors = function (errorMap, errorList) {
                $("#error-summary").html("There are some invalid fields!");
                this.defaultShowErrors();
            }

            $('#ok').click(function(e){
                $('form').valid();
            });
        })

    </script>


    <form name="form" method="POST" action="url" id="myform">
        <input type="text" name="nomecampo" id="nomecampo" value="" data-val="true" data-val-required="Wrong value!">
        <span data-valmsg-for="nomecampo" data-valmsg-replace="true"></span>
        <br>
        <input type="text" name="nomecampo2" id="nomecampo2" value="" data-val="true" data-val-required="Wrong value!">
        <span data-valmsg-for="nomecampo2" data-valmsg-replace="true"></span>
        <br>
        <input type="button" value="OK" id="ok">
        <br>
        <span id="error-summary" data-valmsg-summary="true"></span>
    </form>

</body>

</html>

加载此页面时，一切正常：字段背景为白色，隐藏错误摘要：

如果我单击 "OK"，空白字段会变为红色并显示相应的错误标签。

还显示了摘要跨度：

然后，如果我点击 "OK" 填写每个字段，所有字段都会变成白色，隐藏单个错误标签，但摘要范围仍然可见：

如何让摘要跨度消失？

Answer 1

在您的设置中试试这个：

vsettings.showErrors = function (errorMap, errorList) {
  if (this.numberOfInvalids())
    $("#error-summary").text('There are some invalid fields!')
  else
    $("#error-summary").text('')
  this.defaultShowErrors();
}

Answer 2

由于您只有一条静态消息，因此没有充分理由动态编写文本。将它放入您的 HTML 并用 CSS 隐藏它。

<span id="error-summary" data-valmsg-summary="true">There are some invalid fields!</span>

CSS:

#error-summary {
    display: none;
}

然后在表单为 invalid/valid 时切换 span，只需使用 jQuery show/hide:

vsettings.showErrors = function (errorMap, errorList) {
    if (this.numberOfInvalids()) {
        $("#error-summary").show();
    } else {
        $("#error-summary").hide();
    }
    this.defaultShowErrors();
}

或者使用三元运算符：

vsettings.showErrors = function (errorMap, errorList) {
    var es = $("#error-summary");
    (this.numberOfInvalids()) ? es.show() : es.hide();
    this.defaultShowErrors();
}

不显眼的验证：当所有字段都有效时隐藏验证摘要

Unobtrusive validation: hide validation summary when all fields are valid

css

jquery

jquery-validate

unobtrusive-validation