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