[:contents]
validation
HTMXは、HTML5のバリデーションチェックAPIと統合してます。
HTMXでバリデーションチェックを有効にし、ユーザーの入力が無効である場合、フォームのリクエストを発行しません。 これは、AjaxリクエストとWebSocketの両方に当てはまります。
HTMXは、カスタム検証とエラー処理をフックするために使用できるヴァリエーションチェックを中心にイベント発行が可能です。
hx-on:htmx:validation:validateはcheckValidityメソッドが呼び出される前に呼び出されます。hx-on:htmx:validation:failedはcheckValidityがfalseを返すときに呼び出され、無効な入力を示します。hx-on:htmx:validation:haltedは ヴァリデーションチェックの最中に発生したエラーのためにリクエストが発行されない場合に呼び出されます。エラーの原因はevent.detail.errorsで確認できる場合があります。
validationの例
ここに、hx-on属性を使用してバリデーションチェックするフォームの例があります。
hx-on:htmx:validation:validate属性を使用し、入力値をチェックしてます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTMX Validation Example</title> <script src="https://unpkg.com/htmx.org"></script> </head> <body> <form hx-post="/submit" hx-on:htmx:validation:validate="validateEmail(event)"> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Submit</button> <div id="validation-message" style="color:red;"></div> </form> <script> function validateEmail(event) { // フィールドの値を取得 var email = document.getElementById('email').value; var validationMessage = document.getElementById('validation-message'); // バリデーションロジック: example.comドメインのメールアドレスを許可 if (!email.endsWith('@example.com')) { // バリデーションエラーを設定 event.preventDefault(); validationMessage.textContent = 'Email must be from the domain example.com'; } else { // バリデーションメッセージをクリア validationMessage.textContent = ''; } } </script> </body> </html>
- フォームが送信される前に、
hx-on:htmx:validation:validate="validateEmail(event)"によってカスタムバリデーション関数validateEmailが呼び出されます。 validateEmail関数は、メールアドレスフィールドの値をチェックし、example.com ドメインで終わっていない場合、event.preventDefault()を呼び出してフォームの送信をキャンセルします。
page:https://minegishirei.hatenablog.com/entry/2024/05/28/120458
