Entfernen error-Klasse, wenn der Erfolg in jQuery Validierung

Ich bin mit dem jQuery Validate plugin, und ich habe ein problem festgestellt.

Immer, wenn jemand etwas schreibt in das Feld, und das Feld wird validiert ohne Fehler, der "Fehler-Meldung" wird angezeigt.

Meine Frage ist, wie Entferne ich diese box?

Dies ist mein code:

CSS:

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

}

jQuery:

  $('#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 <a>'s parent <li>.
                //$(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
        }
    });

HTML:

<div class='register-box'>
  <form  id="myform" class="register-form">
    <?php 
        if($checksuccess){ alert("success",$success); }
        if($checkerror){ alert("error",$error);
        }
    ?>
    <div class="field">
      <label for="username">Username</label>
      <div id="username_validate"></div>
      <input type="text" name="username"  value="" placeholder="Enter your desired username"/>
    </div>
    <div class="field">
      <label for="email">E-mail</label>
      <div id="email_validate"></div>
      <input type="email" name="email" value="" placeholder="Enter a valid e-mail address"/>
    </div>
    <button class="login-btn" data-disable-with="Signing In..." name="login" type="submit">Sign In</button>
  </form>
</div>

Finden Sie in diesem jsFiddle ein Beispiel: http://jsfiddle.net/5eb3pctr/

Wie Sie sehen können, wenn Sie etwas schreiben, in das erste Eingabefeld, es wird validiert (grünen Rand-Eingang) - obwohl die rote "Fehler-box" sichtbar.