使用jQuery验证在单独的div中显示错误消息 [英] Display Error Message in a separate div using jQuery validation
问题描述
我正在使用jQuery验证,并且想在div中显示错误消息.<div class="alert alert-error" id="errorContainer">
在表单下方显示的默认设置不适用于我的表单设计.
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.
验证脚本链接到表单所在的页面,它看起来像:
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);
});
现在,我确实尝试将$('#employment-application').validate(validationObj);
更改为以下代码,并尝试将其添加到表单所在页面的底部,但均给出了负面结果.该脚本似乎将style="display:none;"
添加到errorContainer
,并且不会在任何地方加载任何错误.
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 errorContainer
and does not load any errors anywhere.
(尝试将$('#employment-application').validate(validationObj);
更改为以下内容)
(tried changing $('#employment-application').validate(validationObj);
to the below)
$("#employment-application").validate({
errorContainer: "#errorContainer",
errorLabelContainer: "#errorContainer",
errorElement: "li"
})
因此,我想重述一下,我想使用jQuery表单验证并在单独的div中显示收到的错误消息,因为默认设置不适用于我的表单设计.
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.
推荐答案
您可以使用errorPlacement
选项传递这样的回调: http ://jsfiddle.net/cMhQ7/
You can use the errorPlacement
option to pass a callback like this: http://jsfiddle.net/cMhQ7/
我使用了div
id的标准,即输入元素的名称与_validate
后缀串联在一起,但是您可以根据需要进行更改.
I've used a standard of the div
id being the input element's name concatenated with a _validate
suffix but you can change as you wish.
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);
});
这篇关于使用jQuery验证在单独的div中显示错误消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!