Refael
asked on
errorPlacement for one filed
Hello Experts,
Is it possible to control the placement of an error for one filed only?
Here is my code below but it does not seem to work.
lLok at this line below:
AcceptTerms: {
required:true,
errorPlacement: $("#AcceptTerms_error")
},
$('#Registration').validate({
rules: {
FirstName: {required:true,},
LastName: {required:true,},
Email: {required:true, email:true},
AcceptTerms: {
required:true,
errorPlacement: $("#AcceptTerms_error")
},
},
messages: {
FirstName: "Please enter your First Name",
LastName: "Please enter your Last Name",
Email: "Please enter a valid Email address",
AcceptTerms: "Please accept our service Terms & Conditions"
}
});
ASKER
Hi kozaiwaniec
then i should replace the "body" with the "div" where the error should append to, right?
i added it at the top of script and it for some reason ignore all the validations.
can you give me a short example? and how to i attached it to this:
AcceptTerms: {required:true},
Thanks.
Don't put it at the top of the script. Just replace your original line 8 with the new code. And yes, replace body with whatever you want to append to. I would post the whole code, but I'm on an iPad.
Hope that makes sense.
Hope that makes sense.
ASKER
kozaiwaniec thanks,
still does not work. the error is printed at the default location.
Would you be able to post a link to your page?
ASKER
The page is not yet online (testing the form).
here below is the entire validation code:
$(document).ready(function() {
jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]+$/);
},"Only Characters Allowed.");
$('#Registration').validate({
rules: {
FirstName: {required:true, alpha:true},
LastName: {required:true},
Email: {required:true, email:true},
AcceptTerms: {required:true },
},
messages: {
FirstName: "Please enter your First Name",
LastName: "Please enter your Last Name",
Email: "Please enter a valid Email address",
AcceptTerms: "Please accept our service Terms & Conditions"
}
});
Ok, I think this should work.
notes:
#your-input-field: the id of the input field being validated.
#your-div: the id of the element you want your error message appended to.
label: the error message
<script>
$(function() {
jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]+$/);
},"Only Characters Allowed.");
$('#Registration').validate({
rules: {
FirstName: {required:true, alpha:true},
LastName: {required:true},
Email: {required:true, email:true},
AcceptTerms: {
required:true
},
messages: {
FirstName: "Please enter your First Name",
LastName: "Please enter your Last Name",
Email: "Please enter a valid Email address",
AcceptTerms: "Please accept our service Terms & Conditions"
},
errorPlacement: function(label, element) {
if (element.is("#your-input-field")) {
label.appendTo("#your-div");
}
}
}
});
});
</script>
notes:
#your-input-field: the id of the input field being validated.
#your-div: the id of the element you want your error message appended to.
label: the error message
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
kozaiwaniec thank you so much. it works perfect!
:))
errorPlacement: function(){
$("#AcceptTerms_error").ap
}
Of course this just adds itt to the bottom of the page, so you have to write your function according to where you want to place your error.