事件 - htmx:validation:validate

htmx:validation:validate 是 HTMX 提供的事件，用于在请求发送前自定义字段验证逻辑。

它在每个表单字段校验时触发，可以与 elt.setCustomValidity() 方法一起使用来实现自定义验证规则，可以通过 event.preventDefault() 使该字段验证失败。

事件参数

• detail.elt - 触发请求的元素

示例代码

验证用户名不能包含 @ 或 # 符号：

<form hx-post="/submit" hx-target="#result">
  <input id="username" name="username" placeholder="用户名">
  <button type="submit">提交</button>
</form>

<div id="result"></div>

<script>
  document.body.addEventListener("htmx:validation:validate", function(event) {
    const elt = event.target;

    // 只验证用户名字段
    if (elt.name === "username") {
      if (elt.value.includes("@") || elt.value.includes("#")) {
        elt.setCustomValidity("用户名不能包含 @ 或 # 字符！");
        event.preventDefault(); // 阻止该字段验证通过
      } else {
        elt.setCustomValidity(""); // 清除之前的验证信息
      }
    }
  });
</script>