内联验证

本页面演示了如何进行内联字段验证，本例中为电子邮件地址。为此，我们需要创建一个带有输入的表单，该表单将要验证的值 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（这是输入的默认设置）事件发生时它将向 /contact/ 发送 POST 请求进行 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="[email protected]">
  <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;
   }

以下是此示例的工作演示。唯一可接受的电子邮件值是 [email protected]。

Server Requests ↑ Show

演示