内联验证

此示例展示了如何进行内联字段验证，在本例中针对电子邮件地址。要实现这一点， 我们需要创建一个表单，其中包含一个输入字段，该字段会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。

🔗Demo