0

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

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

小提琴：我没有形式的尝试

<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 用于选择用于在页面上动态显示信息的时间范围。如果用户尝试在结束时间之后设定开始时间，我想我是否可以使用这些气泡消息。

4

1 回答 1

1

无法手动触发验证。.checkValidity()如果您检查的上下文是否有效，使用将仅返回真/假，即如果您这样做form.checkValidity()，它将检查所有表单元素是否有效，或者input.checkValidity()仅检查该单个元素的有效性。

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

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

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

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

于 2013-05-27T11:57:38.310 回答