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>

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

如果我点击＆＃34;确定＆＃34;，空字段变为红色，并显示相应的错误标签。

还显示了摘要范围：

然后，如果我在每个字段中填写一个点击＆＃34;确定＆＃34;，所有字段都变为白色，隐藏单个错误标签，但摘要范围仍然可见：

如何使摘要范围消失？

Answer 1

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

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

CSS：

#error-summary {
    display: none;
}

然后在表单无效/有效时切换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();
}

Answer 2

在您的设置中尝试此操作：

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

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

2 个答案: