0

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

我正在运行 jQuery v1.8.2 和 jQuery Validate v1.11.0 该站点在 Twitter 引导程序上运行，因此插件代码末尾的突出显示、成功和错误放置功能。

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

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

这是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/

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

4

1 回答 1

1

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

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

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

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

应该...

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

它也是在通过验证时提交表单的默认行为，因此整个表单submitHandler都可以排除在您的选项之外，并且在这种情况下不会产生任何影响。只需让插件按照其默认值处理提交......这只是为了submit在表单验证时允许该事件。如果您不做任何其他事情，则无需编写自定义处理程序函数。

2） 默认情况下，插件将“聚焦”验证每个字段。那么，为什么要覆盖默认的 onfocusout 回调函数$(element).valid();呢？根据您的标题，它是“未能触发 onblur”。因此，只需删除以下内容，并让插件按照默认设置执行此操作...

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插件。

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

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

有关每个回调函数和选项的详细说明，请参阅此页面。

于 2013-02-11T19:56:22.063 回答