验证

htmx 与 HTML5 验证 API 集成，如果可验证的输入无效，则不会发出表单请求。对于 AJAX 请求和 WebSocket 发送都是如此。

htmx 围绕验证触发事件，可用于挂接自定义验证和错误处理：

• htmx:validation:validate - 在元素 checkValidity() 方法调用之前调用。可用于添加自定义验证逻辑。
• htmx:validation:failed - 当 checkValidity() 返回 false 时调用，表示输入无效。
• htmx:validation:halted - 当由于验证错误而未发出请求时调用。具体错误可以在 event.detail.errors 对象中找到。

非表单元素默认在发出请求之前不会进行验证，但你可以通过将 hx-validate 属性设置为“true”来启用验证。

验证示例

下面是一个使用 hx-on 属性捕获 htmx:validation:validate 事件并要求输入具有以下值的输入示例：

<form id="example-form" hx-post="/test">
    <input name="example"
           onkeyup="this.setCustomValidity('') // reset the validation on keyup"
           hx-on:htmx:validation:validate="if(this.value != 'foo') {
                    this.setCustomValidity('Please enter the value foo') // set the validation error
                    htmx.find('#example-form').reportValidity()          // report the issue
                }">
</form>

请注意，所有客户端验证都必须在服务器端重新完成，因为它们总是可以被绕过。