Question

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

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

似乎突出显示在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

我认为你的建议是在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 2

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

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

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

Answer 3

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

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

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

3 个答案: