title: How to show and hide custom error messages with jQuery Validate every time an error occurs on an input field?
body: <p>this is how I am trying to validate my form:
  HTML:</p>
  
  <pre><code>&lt;form class="am-form amSignUpF"&gt;
                      &lt;!-- Name --&gt;
                      &lt;div class="amSULabelCont"&gt;
                          &lt;label for="name_f-0"&gt;Name&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="amSUInputContainer"&gt;
                          &lt;div class="amSUInputErrorCont" id="error_name_f-0"&gt;&lt;/div&gt;
                          &lt;input id="name_f-0" class="amSignUpField amName amFormControl" type="text" name="name_f"&gt;
                      &lt;/div&gt;
                      &lt;!-- Surname --&gt;
                      &lt;div class="amSULabelCont"&gt;
                          &lt;label for="name_l-0"&gt;Surname&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="amSUInputContainer"&gt;
                          &lt;div class="amSUInputErrorCont" id="error_name_l-0"&gt;&lt;/div&gt;
                          &lt;input id="name_l-0" class="amSignUpField amSurname amFormControl" type="text" name="name_l"&gt;
                      &lt;/div&gt;
                      &lt;!-- Email --&gt;
                      &lt;div class="amSULabelCont"&gt;
                          &lt;label for="email-0"&gt;E-mail&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="amSUInputContainer"&gt;
                          &lt;div class="amSUInputErrorCont" id="error_email-0"&gt;&lt;/div&gt;
                          &lt;input id="email-0" class="amSignUpField email amEmail required amFormControl" type="text" name="email"&gt;
                      &lt;/div&gt;
                      &lt;!-- Password --&gt;
                      &lt;div class="amSULabelCont"&gt;
                          &lt;label for="pass-0"&gt;Password&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="amSUInputContainer"&gt;
                          &lt;div class="amSUInputErrorCont" id="error_pass-0"&gt;&lt;/div&gt;
                          &lt;input id="pass-0" class="amSignUpField amPassword amFormControl" type="password" name="pass"&gt;
                      &lt;/div&gt;
                      &lt;!-- Repeat password --&gt;
                      &lt;div class="amSULabelCont"&gt;
                          &lt;label for="pass-confirm"&gt;Confirm Password&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="amSUInputContainer"&gt;
                          &lt;div class="amSUInputErrorCont" id="error_pass-confirm"&gt;&lt;/div&gt;
                          &lt;input id="pass-confirm" class="amSignUpField amConfirmpassword amFormControl" type="password" name="_pass"&gt;
                      &lt;/div&gt;
                      &lt;!-- Conditions &amp; Privacy --&gt;
                      &lt;div class="amSULabelCBttm"&gt;
                          &lt;div class="amSUInputContainer"&gt;
                              &lt;div class="amSUInputErrorCont" id="error_i_agree-0"&gt;&lt;/div&gt;
                              &lt;input id="i_agree-0" type="checkbox" name="i_agree" value="1" class="amAgree"&gt;
                              &lt;span class="testo_08"&gt;Accept &lt;a href="" class="brCleL" target="_blank"&gt;conditions&lt;/a&gt; and &lt;a href="" class="brCleL" target="_blank"&gt;privacy&lt;/a&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Submit --&gt;
                      &lt;button id="reg-confirm" class="btn btn-warning large" name="buttonsubmit" type="submit"&gt;Registration&lt;/button&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    .amSUInputContainer {
          position: relative;
  }
  
  .amSUInputErrorCont {
          display: none;
          position: absolute;
          text-align: center;
          z-index: 99999;
          min-width: 200px;
          max-width: 500px;
          white-space: nowrap;
          font-size: 15px;
          left: 250px;
          top: -16px;
          border: 1px solid #962729;
          background: #CF2024;
          -moz-box-shadow: inset 0 1px 0px #E4494D;
          -webkit-box-shadow: inset 0 1px 0px #E4494D;
          box-shadow: inset 0 1px 0px #E4494D;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          color: white;
          padding: 2px 18px;
          text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  }
  
  .showError {
          display: block;
  }
  </code></pre>
  
  <p>And JS: </p>
  
  <pre><code>    $(function() {
          $(".am-form.amSignUpF").validate({
                  errorElement: "div",
                  errorContainer: "#errorContainer",
                  errorPlacement: function (error, element) {
                          console.log("VALIDATE");
                          var elId = element.attr("id");
                          $(".amSUInputErrorCont#error_"+elId).append(error);
          },
                  success: function(errorDiv) {
                          console.log(errorDiv);
                          console.log(errorDiv.find("amSUInputErrorCont"));
                          errorDiv.find("amSUInputErrorCont").removeClass("showError");
                  },
                  invalidHandler: function(event, validator) {
                          console.log(validator.currentElements);
                          validator.currentElements.each(function(){
                                  var fieldId = $(this).attr("id");
                                  $(".amSUInputErrorCont#error_"+fieldId).addClass("showError");
                          });
                  }
          });
  
          $(".amName").rules("add", {
                  required: true,
                  minlength: 3,
                  maxlength: 50,
                  messages: {
                          required: "Insert your name.",
                          minlength: "min 3 chars.",
                          maxlength: "max 50 chars."
                  }
          });
  
          $(".amSurname").rules("add", {
                  required: true,
                  minlength: 3,
                  maxlength: 50,
                  messages: {
                          required: "insert you surname.",
                          minlength: "min 3 chars.",
                          maxlength: "max 50 chars."
                  }   
          });
  
          $(".amEmail").rules("add",{
                  required: true,
                  email: true,
                  messages: {
                          required: "insert an e-mail address",
                          email: "insert a valid e-mail address",
                          minlength: "min 3 chars.",
                          maxlength: "max 50 chars."
  
                  }
          });
  
          $(".amPassword").rules("add", {
                  required: true,
                  minlength: 3,
                  maxlength: 50,
                  messages: {
                          required: "provide a password.",
                          minlength: "min 3 chars.",
                          maxlength: "max 50 chars"
                  }
          });
  
          $(".amConfirmpassword").rules("add", {
                  required: true,
                  equalTo: ".amPassword",
                  messages: {
                          required: "confirm the password.",
                          equalTo: "password don't match."
                  }
          });
  
  
          $(".amAgree").rules("add", {
                  required: true,
                  messages: {
                          required: "You must agree to our &lt;br&gt; terms and conditions"
                  }
          });
  
  });
  </code></pre>
  
  <p>Here is the fiddle: 
  <a href="http://jsfiddle.net/B5335/1/" rel="nofollow">http://jsfiddle.net/B5335/1/</a></p>
  
  <p>When you click on the button "Register" and no input field has been compiled, all errors appear, the problem is that if I type inside them, the error won't disappear, when jquery calls the validate's success: callback. How can I make the errors of each error div show every time there's an error and disappear every time there are no errors on a particular input field ?</p>
  
  <p>Thanks for the attention!  </p>