Question

我在页面上有一些元素，我想利用这里描述的漂亮的泡泡样式消息HTML5 form validation。似乎要使用它们，它们必须在表单元素中，并且只有在尝试提交表单时才能用于验证。

从链接的示例中，我想知道如何按照描述使下面的内容工作（例如，如果用户在此之前设置时间，则弹出一个气泡消息）

<body>
    <label>
      Arrival Date:
      <input id="arrivalDate" type="date" onchange="dateChanged()" />
    </label>
    <input type="button" value="Test Reservation"></input>

  <script type="text/javascript">
  function dateChanged(e){
      var arrivalDate = document.getElementById("arrivalDate");
      var value = new Date(arrivalDate.value);
      if (value < new Date()) {
          arrivalDate.setCustomValidity("Arrival date must be after now!");
      } else {
          arrivalDate.setCustomValidity("");
      }
      arrivalDate.checkValidity();
  }
  </script>
</body>

特别是在我的情况下，我有2个KendoUI DateTimePickers用于选择用于在页面上动态显示信息的时间范围。如果用户试图在结束时间之后设置开始时间，我想要使用这些气泡消息。

Answer 1

无法手动触发验证。如果您的检查有效或无效，则使用.checkValidity()将仅返回true / false，即如果您form.checkValidity()它将检查所有表单元素是否有效，或仅input.checkValidity()检查单个元素的有效性。

触发验证的唯一方法是提交。您可以通过提交按钮并调用click函数来模拟这一点。

if (!arrivalDate.checkValidity())
{
    document.getElementById('submit_reservation').click();
}

小提琴： http://jsfiddle.net/QGpQj/3/

注意：由于您的内联事件侦听器，我添加了window.dateChanged = ....。你真的应该使用.addEventListener或者理想情况下使用jQuery为这些不受支持的浏览器添加向后兼容性支持。

非表单元素上的“冒泡”验证消息

1 个答案: