行內驗證

這個範例展示如何進行行內欄位驗證，在此範例中驗證的是電子郵件地址。為此，我們需要建立一個表單，其中包含一個輸入欄位，該欄位會將要驗證的值以 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 進行驗證。它也指定了請求的指示器。

當請求發生時，它將傳回一個部分內容來取代外部 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。

🔗演示