Question

我已经使用过这个插件数百次，从字面上看，从来没有像这样的问题..现在，当提交表单（字段为空）时，错误标签显示正确..但是，当你填写一个或两个正确的字段，这些字段的错误不会消失..如果您重新提交表单，它会提交..即使字段保持为空...但未经过验证。

我正在运行jQuery v1.8.2和jQuery Validate v1.11.0 该站点在Twitter引导程序上运行，因此插件代码末尾的高亮，成功和errorPlacement函数。

我可以提供dev的链接。环境，如果你给我留言并有可能的修复，但想查看实时代码（这个应用程序尚未启动，我刚刚被雇用来清理一些东西，...因此处理这样的问题：[]

非常感谢任何输入，谢谢！

这是JS：

$.validator.setDefaults({
submitHandler: function() {
    form.submit();
}
});

$('#register').validate({ 
rules: {
    name: {
        minlength: 2,
        required: true
    },
    lname: {
        minlength: 2,
        required: true
    },
    username: {
        minlength: 2,
        required: true,
        remote: {
            url: '/setup/verify_username/',
            cache: false
        }
    },
    email: {
        required: true,
        email: true,
        remote: {
            url: '/setup/verify_email/',
            cache: false
        }
    },
    password: {
        required: true,
        alphaNumeric: true,
        minlength: 5,
        maxlength: 250
    },
    password2: {
        required: true,
        alphaNumeric: true,
        minlength: 5,
        maxlength: 250,
        equalTo: '#password'
    },
    postal_code: {
        required: true,
        minlength: 5
    },
    timezones: {
        required: true
    },
    mp: {
        minlength: 10,
        required: true
    },
    gender: {
        required: true
    },
    dob: {
        required: true,
        date: true
    }
},
messages: {
    name: "Please enter your first name",
    lname: "Please enter your last name",
    username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
    }, 
    email: "Please enter a valid email address",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    password2: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same passwords"
    },
    postal_code: "Please enter a valid email address",
    timezones: "Please select a time zone",
    mp: "Please enter a valid mobile number. Only numbers please.",
    gender: "Please select a gender",
    dob: "Please enter a valid Date of Birth in mm/dd/yyyy format."
},
highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
    $(element).closest('form').find('.valid').removeClass("invalid");
},
errorPlacement: function(error, element){
    error.text( element.closest('.control-group').find('.help-line') );
},
onfocusout: function(element) { 
    $(element).valid();  
}
});

我不愿意仅仅因为所有因素与现场环境不同而创建一个jsfiddle示例，但是根据@Sparky的建议，这是它（感谢Sparky） http://jsfiddle.net/DLcLJ/7/

您可以看到，如果您在字段中进行选项卡，它会正确通知您该字段无效..但如果您填写数据，它将保持无效..如果您提交表单，您只需要字段输入有效数据，将保持无效.. meh ...

Answer 1

我将指出我对你发布的代码的观察。

我看到了一些潜在的问题，包括大量冗余和重复的默认功能......

1）您忘记将form变量传递给submitHandler回调函数...

submitHandler: function() {
    form.submit();
}

应该......

submitHandler: function(form) {
    form.submit();
}

这也是在通过验证时提交表单的默认行为，因此整个submitHandler可能会被排除在您的选项之外，在这种情况下它不会有所作为。只需让插件按照默认设置处理提交...这只是为了在表单验证时允许submit事件。如果您没有做任何其他事情，则无需编写自定义处理函数。

2）默认情况下，插件会在“焦点输出”时验证每个字段。那你为什么要用$(element).valid();覆盖默认的onfocusout回调函数呢？根据你的头衔，这是“未能解雇的问题”。所以只需删除以下内容，让插件按照默认情况执行此操作...

onfocusout: function(element) { // <-- remove
    $(element).valid();         // <-- remove
}                               // <-- remove

3）您的代码......

highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
    $(element).closest('form').find('.valid').removeClass("invalid");
},

success被解雇“以显示有效元素”。 “unhighlight被触发”以恢复选项highlight所做的更改。

但是，highlight和unhighlight是免费功能，所以也许你想要这个......

highlight: function(element, errorClass, validClass) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
},
success: function(label) {
    $(label).closest('form').find('.valid').removeClass("invalid");
},

4）您的代码包含无效规则。见评论......

password: {
    required: true,
    alphaNumeric: true,  // <-- not valid spelling and plugin missing
    minlength: 5,
    maxlength: 250
},
password2: {
    required: true,      // <-- redundant
    alphaNumeric: true,  // <-- redundant
    minlength: 5,        // <-- redundant
    maxlength: 250,      // <-- redundant
    equalTo: '#password'
},

拼写为alphanumeric，并且还需要缺少additional-methods.js plugin。

password: {
    required: true,
    alphanumeric: true,
    minlength: 5,
    maxlength: 250
},
password2: {
    equalTo: '#password'
},

以下是OP的jsFiddle的修改版本：http://jsfiddle.net/RQnWx/

See this page有关每个回调函数和选项的详细说明。

jQuery Validation插件无法触发onblur，也无法始终如一地验证提交

1 个答案:

jQuery Validation插件无法触发onb​​lur，也无法始终如一地验证提交

1 个答案:

jQuery Validation插件无法触发onblur，也无法始终如一地验证提交