Question

日期输入字段无效，第一次选择日期时。
由于字段具有空值（检查控制台日志），因此显示所需的错误消息。但是该字段在第二次更改时有效。

注意：原因是日期输入字段在选择日期（单击事件）时失去焦点。但是，日期仅在单击事件发生时才更改。但是验证器将在焦点事件上验证字段。

我正在使用Jquery Validation（对小部件使用bootstrap-datepicker）来验证表单。

^^用于在整页上获得更好的UX Run代码片段;）要么 jsfiddle

来自@Sparky / @Vignesh的

：是的，这是一种解决方法，我们可以使用change / hide / changeDate（module attribute）事件处理程序。一旦设置了输入值，它将被触发。但是问题是，无论何时我们从年->月->日期中进行选择，选择器中的每次点击都会从触发的输入和焦点事件中移除焦点，并显示错误消息，直到选择日期为止。

它不像选择字段那样平坦。在选择字段中，只有从字段小部件中选择选项后，才会触发聚焦事件。像这样，如何在年/月/日选项之间移动而又不会看到错误消息？。

jQuery 和 HTML

    $(function() {
      $("#editEventForm").validate({
        rules: {
          full_name: {
            required: true,
          },
          event_date: {
            required: true,
          },
        },
        messages: {
          full_name: "Please enter your full name!",
          event_date: "Please enter valid date!",
        },
        highlight: function(element, errorClass) {
          var e = $(element);
          e.closest('.has-feedback').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass) {
          var e = $(element);
          e.closest('.has-feedback').removeClass('has-error').addClass('has-success');
        },
        onfocusout: function(element) {
          console.log("element value --> ", $(element).val());
          return $(element).valid();
        },
      });
      $('#eventDate').datepicker({
        autoclose: true,
      }).on('change', function() {
        $(this).valid(); // triggers a validation test
        // $(this) refers to $('#eventDate')
      });

    });

.has-error :focus {
  border-color: #f84545 !important;
}
.error {
  color: #f84545;
}

<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>



<form id="editEventForm">
  <div class="form-group">
    <div class="has-feedback">
      <label for="eventDate">Full Name * </label>
      <input class="form-control" id="fullName" name="full_name" type="text">
    </div>
    <div class="has-feedback">
      <label for="eventDate">Event Date * </label>
      <input class="form-control" id="eventDate" name="event_date" placeholder="MM/DD/YYYY" type="text">
    </div>
  </div>
  <input type="submit" value="ClickMe">
</form>

Answer 1

TL; DR ：单击事件将焦点移至被单击的元素。因此，在选择器中单击日期时，将焦点从输入中移除，并触发focusout事件。在设置输入值之前，选择器执行各种操作。因此，值focusout上为空。因此，警报保留在用户界面中。

说明：点击/突出显示date字段时，datepicker打开。当您单击date中的datepicker时，就会出现真正的问题。单击它后，您会看到日期字段立即失去焦点（闪烁的插入符号消失）。选择器按照我们配置的autoclose:true立即关闭。以下是在日期选择器中编写的隐藏功能。

hide: function() {
        return this.isInline || !this.picker.is(":visible") ? this : (this.focusDate = null,
        this.picker.hide().detach(),
        this._detachSecondaryEvents(),
        this.setViewMode(this.o.startView),
        this.o.forceParse && this.inputField.val() && this.setValue(),
        this._trigger("hide"),
        this)

使选择器隐藏起来。
detach()可以删除关联的元素，以防万一再次重新插入元素时不影响元素详细信息。
从日期选择器中删除附加的辅助事件。
将视图模式设置为已配置的视图模式（由于在我们的问题中未配置该视图模式，因此将其设置为默认模式）。
解析所选值并将解析结果设置到输入框。
运行在选项中配置的自定义回调（如果有）

因此，在输入中设置值之前，将触发onfocusout事件。而且由于当时没有任何值，因此会显示错误。

为防止这种情况发生，请在选择器中添加一个hide事件处理程序（如下所示），并从那里处理相同的验证。一旦设置了输入值（如上所述），便会触发该自定义事件处理程序。

$(function() {
  $("#editEventForm").validate({
    rules: {
      full_name: {
        required: true,
      },
      event_date: {
        required: true,
      },
    },
    messages: {
      full_name: "Please enter your full name!",
      event_date: "Please enter valid date!",
    },
    onfocusout: function(element) {
        $(element).valid();
    },
  });
  $('#eventDate').datepicker({
    autoclose: true,
    orientation: "bottom right"
  }).on("hide",function(){
      $("#editEventForm").data("validator").settings.ignore="";
      $(this).valid();
  }).on("focus",function(){
      $("#editEventForm").data("validator").settings.ignore="#eventDate, :hidden";
  });
});

<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>



<form id="editEventForm">
  <div class="form-group">
    <div>
      <label for="eventDate">Full Name * </label>
      <input class="form-control" id="fullName" name="full_name" type="text">
    </div>
    <div>
      <label for="eventDate">Event Date * </label>
      <input class="form-control" id="eventDate" name="event_date" placeholder="MM/DD/YYYY" type="text">
    </div>
  </div>
  <input type="submit" value="ClickMe">
</form>

编辑：如前所述，我们无法阻止触发focusout事件。但是可以通过一种变通方法来满足要求。

重点ignore进行验证，并在hide上删除忽略的验证并进行验证。

为清楚起见，请通过

忽略对指定元素的验证

$("#editEventForm").data("validator").settings.ignore="#eventDate, :hidden";`

（{:hidden是默认值，因此请不要忽略）。在验证期间，插件在内部使用jQuery not选择器来忽略元素。隐藏日期选择器时（通过选择日期/点击外部），从配置中删除该元素并应用验证。

Answer 2

由于悬赏，问题不能closed as duplicate。

jQuery Validate插件会自动触发针对焦点对准和键入普通表单输入字段的验证测试，并且不适用于日期选择器。

每次选择日期时，您都必须以编程方式触发验证：

$('#eventDate').datepicker({
    autoclose: true,
    // endDate: '+45d', // show current date - next 45 days
}).on('change', function() {
    $(this).valid();  // triggers a validation test
    // $(this) refers to $('#eventDate')
});

Answer 3

简化@Vignesh解决方法。

我们可以跳过字段验证onfocusout，而对hide事件进行验证

// here we can skip the validation
onfocusout: function(element) {
  var elementId = element.getAttribute('id');
  if (elementId === "eventDate") {
    // datepicker widget - don't do validation on focusout event
    return false;
  }
  return $(element).valid();
},


// here we can do the validation
$('#eventDate').datepicker({
  autoclose: true,
}).on('hide', function() {
  // datepicker - on hide do the field validation
  $('#eventDate').valid();
});

Jsfiddle

Answer 4

您可以在日期选择器中首次加载时设置日期。

$('#eventDate').datepicker({
                autoclose: true 
            }).datepicker("setDate", 'now');

使用jquery-validation验证聚焦时的日期字段

4 个答案: