jquery - jQuery Validator，重置密码字段和消息

Question

我正在使用 jQuery Validation 插件进行表单字段验证。想法是，如果表单提交上的任何字段不是有效的密码字段并且它们的错误消息将重置，而其他字段仍然存在。我已经设法重置密码字段，但我无法删除错误消息。

代码在这里：http: //jsfiddle.net/2Z9jp/

如果您为所有字段输入无效值并提交，密码输入字段将为空，但它们的错误仍然存​​在。我想要的是在这种情况下删除密码字段的错误消息。

似乎高亮发生在 invalidHandler 之后，这导致了这个问题。

这是代码：

<form id="registerForm" class="regForms" method="post" action="/">

        <span>username: </span><input type="text" id="username" name="username" /><br />
        <span class="passwordHolder">
            <span>password: </span><input type="password" id="password1" name="password1" /><br />
        </span>
        <span class="passwordHolder">
            <span>confirm password: </span><input type="password" id="password2" name="password2" /><br />
        </span>

        <input type="submit" />
    </div>
</form>



$("#registerForm").validate({
    rules: {
        username: {
            required: true,
            minlength: 6
        },
        password1: {
            required: true,
            minlength: 6,
            maxlength: 256
        },
        password2: {
            required: true,
            equalTo: "#password1",
            minlength: 6,
            maxlength: 256
        }
    },

    messages: {
        username: {
            required: "required",
            minlength: "should be 6 or longer"
        },
        password1: {
            required: "required",
            minlength: "should be 6 or longer"
        },
        password2: {
            required: "required",
            minlength: "should be 6 or longer",
            equalTo: "should be the same as password"
        }
    },

    invalidHandler: function(form, validator) {
        $(':password').val('');
        $('.passwordHolder label.error').hide();
    }

});

Answer 1

提交表单时，您可以像这样检查：

$("#registerForm").submit(function(){
    if ($("#password1").valid() == true ) {
       alert('Ok');
    }
}); 

Answer 2

我认为您的建议是绝对正确的，即高亮显示在 invalidHandler 之后。我认为您应该使用 errorPlacement 方法。文档可以在这里找到：

http://docs.jquery.com/Plugins/Validation/validate#toptions

您可以检查密码类型的元素并在这种情况下省略错误放置。

另外一些代码：

$("#myform").validate({
  errorPlacement: function(error, element) {
        if(!element.is(':password'))
              element.after(error);
   },
   debug:true
 })

Answer 3

问题是调用label.error后添加的。invalidHandler

一个快速的解决方法可能是使用 setTimeout

setTimeout(function() {
            $('.passwordHolder label.error').hide();
          },100);