Reputation: 3368
I am using jQuery validation to validate a form. My form is slit up into sections. The top part of the form, which has normal inputs, the validation error messages are being placed exactly as I want them.
My issue is that a specific error label that is placed in a different section will not display. I was told to try our the errorplacement
function, but I do not see how I can use this with one specific error message.
errorPlacement: function(error, element) {
}
In my code below, you will see two HTML
comments. The first one is to illustrate that if I move the input there, then the error message will display. The second comment is where the input is currently and where I actually want it, but it will not display there.
The input's id is #interestHidden
.
Does anyone see how I can use errorplacement
for just this one error message?
See my code below
<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">
Attempt:
errorPlacement: function(error, element) {
if(element.attr("id") == "interestHidden") {
error.html('#interestError');
} else {
//Placement for other interest Hidden
}
},
Updated 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) {
Upvotes: 0
Views: 549