title: how to check how many invalid fields are left on each validation fix in jquery validator
body: <p>I am displaying all of my errors in a div and want to hide div automatically when I fix all of my errors. I want it to happen before click on submit.</p>
  
  <p>For example I have two input boxes and on submit I got required errors in a div then I start filling one by one when I fill that last input box I want my errorsDiv fade of without clicking on submit.</p>
  
  <pre><code>$(function(){
    $.validator.setDefaults({
    highlight: function(element)
    {
      $(element).closest('.form-control').addClass('is-invalid');
    },
    unhighlight: function(element)
    {
      $(element).closest('.form-control').removeClass('is-invalid').addClass('is-valid');
  
        ====== This is it what I was trying ======
  
         var allErrors = $(".error");
         if(allErrors.length &lt; 1)
          {
          $(".errorsDiv").fadeOut();
          }
        ========================================
     },
    });
    var validator = $('#create_hotels').validate({
  
      rules:{
        hotel_name:{
          required: true,
          lettersonly: true,
        },
        hotel_country:{
          required: true
        }        
      },
      messages:{
        hotel_name:{
          required: "Please enter hotel name",
          lettersonly: "Only letters A to Z are allowed",
        },
        hotel_country:{
          required: "Please choose hotel country",
        }
      },
      errorPlacement: function(error, element) {
           $("#errorsDiv").fadeIn();
           error.appendTo('#errorsDiv');
         },
       errorElement: 'span',
       wrapper: 'li'
  
    });
  
  
    });
  </code></pre>