jquery.validate輕微問題

Question

我正在使用jquery驗證這是我的問題。 一切都按預期進行驗證，但是如果我有5個字段並且都出現錯誤，則它們到達錯誤類，一旦正確，錯誤消息就會保留在其余字段上，但是錯誤類將被刪除，並在所有輸入上均替換為有效類。

.js

    $("#commentForm").validate({
                errorElement : "span",
                validClass : "has-success",
                errorClass : "has-error",
                errorPlacement : function(error, element) {
                    error.appendTo(element.parent("div").next("span"));
                },
                highlight : function(element, errorClass, validClass) {
                    $('div').addClass(errorClass).removeClass(validClass);
                },
                unhighlight : function(element, errorClass, validClass) {
                    $('div').removeClass(errorClass).addClass(validClass);
                },
                rules : {
                    emailfield : {
                        required : true,
                        email : true,
                        minlength : 3
                    },
                    namefield : {
                        required : true,
                        minlength : 3
                    },
                    urlfield : {
                        required : true,
                        minlength : 3,
                        url : true
                    }
                }
            });

.html

    <div class="input-group margin-bottom-sm">
        <span class="input-group-addon input-sm"><i class="fa fa-envelope-o fa-fw"></i></span>
        <input class="form-control input-sm required email" type="text" placeholder="Email address" id="emailfield" name="emailfield">
    </div>
    <span class="help-block"></span>

    <div class="input-group margin-bottom-sm">
        <span class="input-group-addon input-sm"><i class="fa fa-users fa-fw"></i></span>
        <input class="form-control input-sm required" type="text" placeholder="Name" id="namefield" name="namefield">
    </div>
    <span class="help-block"></span>

Answer 1

需要定位當前element的div父對象，因此請嘗試

highlight: function (element, errorClass, validClass) {
    $(element).closest('div').addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
    $(element).closest('div').removeClass(errorClass).addClass(validClass);
},

演示： 小提琴