如何解决jquery datepicker与验证同时使用问题

Question

当我使用带有触发器图标的datepicker时，用户可以点击这个图标来选择日期，或者直接在文本框中输入(txtDate)，我还使用了jquery验证来要求文本框不能为空。但是当用户提交包含空文本框(txtDate.Text="")的表单时，验证的错误消息会将触发器图标推送到右侧。你能告诉我解决方案吗？非常感谢!

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

errorPlacement函数接收两个参数-错误消息和已验证的元素。使用后者来决定是否自定义字段的位置(例如，通过添加类)：

$('form').validate({
      rules: {...},
      errorPlacement: function(error, element) {
            if (element.hasClass('customError')) {
                  // custom error placement
            }
            else {
                  element.after(error); // default error placement
            }
      }
});