使用 jQuery 验证在单独的 div 中显示错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17021615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Error Message in a separate div using jQuery validation
提问by user2371301
I am using jQuery validation and I am wanting to display the error message in a div <div class="alert alert-error" id="errorContainer">The default of showing below the forms does not work with my form design.
我正在使用 jQuery 验证，并且我想在 div 中显示错误消息<div class="alert alert-error" id="errorContainer">默认的在表单下方显示不适用于我的表单设计。
The validation script is linked to the page I have the form on and it looks like:
验证脚本链接到我有表单的页面，它看起来像：
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
address: {
minlength: 5,
required: true
},
city: {
minlength: 2,
required: true
},
state: {
minlength: 2,
maxlength: 2,
required: true
},
zip: {
minlength:5,
maxlength:5,
required: true
},
phone: {
required: true,
phoneUS: true
},
phone_other: {
required: true,
phoneUS: true
},
email: {
required: true,
email: true
},
date_to_start: {
required: true
},
ssn: {
required: true,
ssn: true,
},
salary: {
required: true
}
}
};
var validationObj = $.extend (rules, Application.validationRules);
$('#employment-application').validate(validationObj);
});
Now I did try changing $('#employment-application').validate(validationObj);to the code below as well as tried adding it to the bottom of the page I have the form on, both gave negative results. The script seems to add style="display:none;"to the errorContainerand does not load any errors anywhere.
现在我确实尝试更改$('#employment-application').validate(validationObj);为下面的代码，并尝试将其添加到我有表单的页面底部，两者都给出了负面结果。该脚本似乎添加style="display:none;"到errorContainer并且不会在任何地方加载任何错误。
(tried changing $('#employment-application').validate(validationObj);to the below)
（尝试更改$('#employment-application').validate(validationObj);为以下）
$("#employment-application").validate({
errorContainer: "#errorContainer",
errorLabelContainer: "#errorContainer",
errorElement: "li"
})
So re-cap, I am wanting to use jQuery Form Validation and display the error messages received in a separate div because the default does not work with my form design.
所以重新总结一下，我想使用 jQuery 表单验证并显示在单独的 div 中收到的错误消息，因为默认值不适用于我的表单设计。
回答by Matt Harrison
You can use the errorPlacementoption to pass a callback like this: http://jsfiddle.net/cMhQ7/
您可以使用该errorPlacement选项来传递这样的回调：http: //jsfiddle.net/cMhQ7/
I've used a standard of the divid being the input element's name concatenated with a _validatesuffix but you can change as you wish.
我使用的divid标准是输入元素的名称与_validate后缀连接，但您可以根据需要进行更改。
HTML
HTML
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
Javascript
Javascript
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
回答by Antonio AB
If only want to change the default placement to certain elements, you can use this improvement. This implements the default behaviour of validate script
如果只想将默认位置更改为某些元素，则可以使用此改进。这实现了验证脚本的默认行为
errorPlacement: function(error, element){
var name = $(element).attr("name");
var $obj = $("#" + name + "_validate");
if($obj.length){
error.appendTo($obj);
}
else {
error.insertAfter(element);
}
},
