When I used datepicker with trigger icon so that users could choose date from clicking this icon or type directly in textbox (txtDate), I also used jquery validation to require textbox must be not empty. But when a user submit the form with empty textbox (txtDate.Text=""), the error message of validation push trigger icon to the right. Could you tell me the solution? Thank you very much!
2 Answers
$('#some_form').validate({
rules: {...},
messages: {...},
errorPlacement: function(error, element) { //solve you problem
var trigger = element.next('.ui-datepicker-trigger');
error.insertAfter(trigger.length > 0 ? trigger : element);
}
});
Comments
The errorPlacement function receives two parameters - the error message and the validated element. Use the latter to decide whether or not to customize the placement for your fields (for example, by adding a class):
$('form').validate({
rules: {...},
errorPlacement: function(error, element) {
if (element.hasClass('customError')) {
// custom error placement
}
else {
element.after(error); // default error placement
}
}
});
