行内验证

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

🔗演示