title: Unobtrusive validation: hide validation summary when all fields are valid
body: <p>Using unobtrusive validation, I cannot make summary error span disappear when all the form fields are valid.</p>
  
  <p>I prepared a single file example as the production code is part of a more complex MVC5 solution :
      </p>
  
  <pre><code>&lt;head&gt;
  
      &lt;script src="jquery-3.1.1.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.validate.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          .input-validation-error { background-color:Red;}
          .validation-summary-valid { display:none; }
          .validation-summary-errors { display:block; }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;script&gt;
  
          $(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();
              });
          })
  
      &lt;/script&gt;
  
  
      &lt;form name="form" method="POST" action="url" id="myform"&gt;
          &lt;input type="text" name="nomecampo" id="nomecampo" value="" data-val="true" data-val-required="Wrong value!"&gt;
          &lt;span data-valmsg-for="nomecampo" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;br&gt;
          &lt;input type="text" name="nomecampo2" id="nomecampo2" value="" data-val="true" data-val-required="Wrong value!"&gt;
          &lt;span data-valmsg-for="nomecampo2" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;br&gt;
          &lt;input type="button" value="OK" id="ok"&gt;
          &lt;br&gt;
          &lt;span id="error-summary" data-valmsg-summary="true"&gt;&lt;/span&gt;
      &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When this page is loaded, everything is ok: fields background is white and error summary is hidden:</p>
  
  <p><a href="https://i.stack.imgur.com/L1lc9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L1lc9.jpg" alt=""></a></p>
  
  <p>If I click "OK", empty fields become red and the corrisponding error label is shown.</p>
  
  <p>Summary span is also shown:</p>
  
  <p><a href="https://i.stack.imgur.com/VsIku.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VsIku.jpg" alt=""></a></p>
  
  <p>Then, if I fill every field an click "OK", all fields become white, single error labels are hidden, but summary span remains visible:</p>
  
  <p><a href="https://i.stack.imgur.com/G7UNW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G7UNW.jpg" alt="enter image description here"></a></p>
  
  <p>How can I make the summary span disappear?</p>