Search code examples
jquerycssjquery-validateunobtrusive-validation

Unobtrusive validation: hide validation summary when all fields are valid

Using unobtrusive validation, I cannot make summary error span disappear when all the form fields are valid.

I prepared a single file example as the production code is part of a more complex MVC5 solution : 

<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>

When this page is loaded, everything is ok: fields background is white and error summary is hidden:

If I click "OK", empty fields become red and the corrisponding error label is shown.

Summary span is also shown:

Then, if I fill every field an click "OK", all fields become white, single error labels are hidden, but summary span remains visible:

enter image description here

How can I make the summary span disappear?

Solution

  • Since you only have one static message, there is no good reason to dynamically write the text. Put it into your HTML and hide it with CSS.

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

    CSS:

    #error-summary {
    display: none;
}

    Then to toggle the span when the form is invalid/valid, just use jQuery show/hide:

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

    Or using a ternary operator:

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