title: Remove error class when success in jQuery Validate
body: <p>I am using the jQuery Validate plugin, and I've encountered a problem.</p>
  
  <p>Whenever someone writes something in the field, and the field gets validated with no errors, the "error-message box" is still shown.</p>
  
  <p>My question is, how can I remove this box?</p>
  
  <p>This is my code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.register-box .field .has-error{
      border: 1px solid red !important;
  
  }
  .register-box .field .has-error.success {
      border:none !important;
  }
  .register-box .field .has-success{
      border: 1px solid #42CDA1 !important;
      background: #EEFBF7 !important;
      color: black !important;
      border-bottom: 0px !important;
  }
  .register-box .success &gt; .error{
      border: 1px solid #42CDA1 !important;
  }
  .register-box .field .valid{
      border: 1px solid #42CDA1 !important;
  }
  .register-box .error{
      margin-left: 200px !important;
      float: left;
      width: 150px;
      max-width: 150px;
      text-align: left;
      color: red;
      background: red;
      color: white;
      font-weight: bold;
      font-size: 11px;
      -webkit-font-smoothing: antialiased;
      font-smooth: always;
      -moz-osx-font-smoothing: grayscale;
      padding: 5px 7px;
  
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>  $('#myform').validate({
  
              debug: true,
              errorClass: "has-error",
              errorElement: "div",
              errorContainer: $("#warning, #summary"),
  
              errorPlacement: function (error, element) {
                          var name = $(element).attr("name");
                          error.appendTo($("#" + name + "_validate"));
                          $("#" + name + "_validate").addClass('error');
                      },
  
  
              /*errorPlacement: function(error, element) {
                  error.appendTo("#errorHolder");
              },*/
              success: function(label,element) {
                  label.hide();
                  //var parent = $('.success').parent().get(0); // This would be the &lt;a&gt;'s parent &lt;li&gt;.
                  //$(parent).addClass('has-success');    
              },
  
              rules: {
                  username: {
                       required: true
                  },
                  email: {
                      required: true,
                      minlength: 5
                  }
  
          },
  
              highlight: function(element, errorClass) {
                      $(element).addClass(errorClass);
                  },
  
          messages: {
                  firstname: "Enter your firstname",
                  lastname: "Enter your lastname",
                  username: {
                      required: "Enter a username",
                      minlength: jQuery.format("Enter at least {0} characters"),
                      remote: jQuery.format("{0} is already in use")
                  }
              },
          submitHandler: function (form) { // for demo
              alert('valid form submitted'); // for demo
              return false; // for demo
          }
      });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class='register-box'&gt;
    &lt;form  id="myform" class="register-form"&gt;
      &lt;?php 
          if($checksuccess){ alert("success",$success); }
          if($checkerror){ alert("error",$error);
          }
      ?&gt;
      &lt;div class="field"&gt;
        &lt;label for="username"&gt;Username&lt;/label&gt;
        &lt;div id="username_validate"&gt;&lt;/div&gt;
        &lt;input type="text" name="username"  value="" placeholder="Enter your desired username"/&gt;
      &lt;/div&gt;
      &lt;div class="field"&gt;
        &lt;label for="email"&gt;E-mail&lt;/label&gt;
        &lt;div id="email_validate"&gt;&lt;/div&gt;
        &lt;input type="email" name="email" value="" placeholder="Enter a valid e-mail address"/&gt;
      &lt;/div&gt;
      &lt;button class="login-btn" data-disable-with="Signing In..." name="login" type="submit"&gt;Sign In&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Please see this jsFiddle for an example: <a href="http://jsfiddle.net/5eb3pctr/" rel="noreferrer">http://jsfiddle.net/5eb3pctr/</a></strong></p>
  
  <p>As you can see, if you write something in the first input field, it gets validated (green border around input) - although the red "error-box" is visible.</p>