How to solve problem when use jquery datepicker and validation in the same time

Question

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!

Answer 1

$('#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);
  }
});

Answer 2

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
            }
      }
});