Reputation: 3474
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);
});
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.
(tried changing $('#employment-application').validate(validationObj);
to the below)
$("#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.
Upvotes: 7
Views: 44771
Reputation: 51
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);
}
},
Upvotes: 5
Reputation: 13597
You can use the errorPlacement
option to pass a callback like this: http://jsfiddle.net/cMhQ7/
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
$(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);
});
Upvotes: 21