Jquery 删除输入后验证不生效

Question

我有一个使用 jquery 验证的表单，除了这个问题外，它工作得很好。要重现此问题，请填写表单中的所有字段，然后随机选择字段并删除输入。继续这样做，直到顶部不再出现错误消息，这就是问题所在。

我不确定为什么它在删除输入时不验证字段。如果有人能告诉我为什么这样做，那就太好了。我无法在 jquery 验证网站上的任何演示中重现它，因此我认为这与我的设置方式有关。

$.validator.addMethod("notEqual", function(value, element, param) {
      return this.optional(element) || value != param;
    });

$("#wizardForm").validate({
    rules: {
        firstname: {
            required:{
                depends:function(){
                    $(this).val($.trim($(this).val()));
                    return true;
                }
            },
            pattern: /^[a-zA-Z]+([\s]+)?['-]?([a-zA-Z]+)?$/
        },
        lastname: {
            required: {
                depends:function(){
                    $(this).val($.trim($(this).val()));
                    return true;
                }
            },
            pattern: /^[a-zA-Z]+([\s]+)?['-]?([a-zA-Z]+)?$/
        },
        email: {
            required: {
                depends:function(){
                    $(this).val($.trim($(this).val()));
                    return true;
                }
            },
            email: true,
            notEqual: "demo@somewhere.com",
            pattern: /^(.)+(@)(.)+[.](.)+$/
        },
        password: {
            required: true,
            equalTo: {
                param: "#PWconfirm",
                depends: function(element) {
                  return $("#wizardForm #PWconfirm").val();
                }
            }
        },
        PWconfirm: {
            required: true
        },
        company: {
            required: true
        },   
        zip: {
            required: true
        },         
        country: "required"
    },
    errorLabelContainer: ".validation-error-msg",
    wrapper: "li",
    errorClass: "validation-error",
    messages: {
        firstname: {
            required: "The 'First Name' field cannot be empty.",
            pattern: "The 'First Name' field must not contain numbers or special characters."
        },
        lastname: {
            required: "The 'Last Name' field cannot be empty.",
            pattern: "The 'Last Name' field must not contain numbers or special characters."
        },
        email: {
            required: "The 'Email Address' field cannot be empty.",
            email: "The 'Email Address' must be in a valid email format.",
            notEqual: "This email address is reserved, please use another.",
            pattern: "The 'Email Address' must be in a valid email format."
        },
        password: {
            required: "The 'Password' field cannot be empty.",
            equalTo: "Password fields do not match!"
        },
        company: "The 'Company Name' field cannot be empty.",
        zip: "The 'Zip Code' field cannot be empty.",
        PWconfirm: "The 'Retype Password' field cannot be empty.",
        country: "The 'Country' field needs a valid selection."
    }
});

在此先感谢您的任何建议。

Answer 1

引用OP的评论：

I should note I am never clicking the submit button. Fill in all the fields and then take out some random fields.

叫做"lazy validation"。这就是插件设计的工作方式。基本上，在第一次单击提交按钮之前，空字段的错误会被忽略。

见documentation:

Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages – they won't get bugged before having the chance to actually enter a correct value

Jquery 删除输入后验证不生效

Jquery Validation doesn't validate when input is removed

javascript

forms

jquery

jquery-validate