インライン検証

この例は、インラインのフィールドバリデーション、この場合はメールアドレスをどのように実行するかを示しています。これを行うには、検証される値でサーバーに POST をバックし、検証結果で DOM を更新するフォームを作成する必要があります。

このフォームから始めます

<h3>Signup Form</h3>
<form hx-post="/contact">
  <div hx-target="this" hx-swap="outerHTML">
    <label>Email Address</label>
    <input name="email" hx-post="/contact/email" hx-indicator="#ind">
    <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
  </div>
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" name="firstName">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" class="form-control" name="lastName">
  </div>
  <button class="btn primary">Submit</button>
</form>

フォーム内の最初の div がリクエストのターゲットとして設定され、outerHTML スワップ戦略を指定することに注意してください。つまり、レスポンスによって完全に置き換えられます。次に、入力では、changed イベントが発生した場合に検証のために POST で /contact/email に送信するよう指定します（これは入力のデフォルトです）。また、リクエストのインジケータも指定します。

リクエストが発生すると、outer div を置き換える部分的な戻り値が返されます。このようになります。

<div hx-target="this" hx-swap="outerHTML" class="error">
  <label>Email Address</label>
  <input name="email" hx-post="/contact/email" hx-indicator="#ind" value="test@foo.com">
  <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
  <div class='error-message'>That email is already taken.  Please enter another email.</div>
</div>

この div には error クラスが注釈され、エラー メッセージ要素が含まれていることに注意してください。

このフォームは、この CSS で軽くスタイル設定できます。

  .error-message {
    color:red;
  }
  .error input {
      box-shadow: 0 0 3px #CC0000;
   }
  .valid input {
      box-shadow: 0 0 3px #36cc00;
   }

視覚的なフィードバックを向上させるため。

以下はこの例の動作するデモです。受け入れられるメールは test@test.com のみです。

🔗デモ