我正在使用 jQuery 验证来验证表单。我的表格被分成几部分。表单的顶部有正常的输入,验证错误消息完全按照我想要的方式放置。
我的问题是不会显示放置在不同部分的特定错误标签。有人告诉我尝试我们的errorplacement
功能,但我看不出如何使用它来处理一条特定的错误消息。
errorPlacement: function(error, element) {
}
在我下面的代码中,您将看到两条HTML
注释。第一个是为了说明如果我将输入移到那里,则会显示错误消息。第二条评论是输入当前的位置以及我真正想要的位置,但它不会显示在那里。
输入的 id 是#interestHidden
.
有谁知道我如何errorplacement
只使用这一条错误消息?
请参阅下面的代码
<section class="sec90">
<h3 class="subTC">Enter your information below.</h3>
<form action="" id="salesforce_submit" method="POST" enctype="multipart/form-data">
<div><input id="first_name" placeholder="First Name*" class="input block" maxlength="40" name="first_name" type="text"></div>
<div><input id="last_name" placeholder="Last Name*" class="input block" maxlength="80" name="last_name" type="text"></div>
<div><input id="company" placeholder="Company*" class="input block" maxlength="40" name="company" type="text"></div>
<!-- Moving it here will allow the message to display -->
</section>
<section class="sec90">
<h3 class="subTC">What are you interested in?*</h3>
<!-- Moving it here, it doesn't show -->
<div><input type="hidden" id="interestHidden" name="interestHidden" value=""></div>
<div id="interestWrap">
<div class="interest">
试图:
errorPlacement: function(error, element) {
if(element.attr("id") == "interestHidden") {
error.html('#interestError');
} else {
//Placement for other interest Hidden
}
},
更新的 JS:
$('#salesforce_submit').validate({
ignore: [],
//ignore: "",
rules: {
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
phone: {
required: true,
//digits: true,
minlength: 10,
alphanumeric: true
},
zip: {
required: true,
digits: true,
minlength: 5
},
company: {
required: true,
minlength: 2
},
interestHidden: {
required: true,
min: 1
}
},
messages: {
first_name: {
required: "Please enter your first name",
minlength: "Your first name seems a bit short, doesn't it?"
},
last_name: {
required: "Please enter your last name",
minlength: "Your last name seems a bit short, doesn't it?"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number with only numbers",
minlength: "Your number seems a bit short, doesn't it?"
},
zip: {
required: "Please enter your zip code",
digits: "Please enter a valid zip code with only numbers",
minlength: "Your zip code seems a bit short, doesn't it?"
},
company: {
required: "Please enter your company name",
minlength: "Your company name seems a bit short. Please enter at least 2 characters"
},
interestHidden: {
required: "Please choose at least one interest",
min: "At least one interest needs chosen"
}
},
/*errorPlacement: function(error, element) {
if(element.attr("id") == "interestHidden") {
error.html('#interestError');
} else {
//Placement for other interest Hidden
}
},*/
errorPlacement: function (error, element) {
if ($(element).attr('name') == 'interestHidden') {
// error.insertAfter($(element).next());
error.insertBefore(element.prev('#interestHidden'));
} else {
error.insertAfter(element); // <- default
}
},
submitHandler: function(form) {