web-dev-qa-db-ja.com

jQueryValidateで成功したときにエラークラスを削除する

JQuery Validateプラグインを使用していますが、問題が発生しました。

誰かがフィールドに何かを書き込み、フィールドがエラーなしで検証されるたびに、「エラーメッセージボックス」が引き続き表示されます。

私の質問は、どうすればこのボックスを削除できますか？

これは私のコードです：

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>

例については、このjsFiddleを参照してください： http://jsfiddle.net/5eb3pctr/

ご覧のとおり、最初の入力フィールドに何かを書き込むと、検証されます（入力の周囲の緑色の境界線）。ただし、赤い「エラーボックス」は表示されます。

javascriptjqueryhtmlcssjquery-validate
9
oliverbj

Successで、エラーコンテナerrorに追加したdivクラスを削除する必要があります

したがって、コードは次のようになります。

success: function(label,element) {
    label.parent().removeClass('error');
    label.remove(); 
},

[〜＃〜]デモ[〜＃〜]

19
Rupali