フォームのバリデーションは、ユーザー入力の正当性を確認し、エラーを防ぐために重要な機能です。
従来、フォームバリデーションの実装にはJavaScriptによる複雑な処理が必要でした。
しかし、htmxを使えばシンプルなHTMLの属性だけで実現できます。
この記事では、htmxを使ったインラインフォームバリデーションの実装方法を詳しく解説します。
本記事の内容
- インラインバリデーションのHTML構造
- バリデーション結果の動的表示
- サーバーサイドのバリデーション処理
- サンプルコード
- まとめ
それでは、上記に沿って解説していきます。
インラインバリデーションのHTML構造
htmxについてよくわからない場合は、次の記事からご覧ください。
まず、インラインバリデーションのHTML構造を定義します。
フォーム要素とバリデーション結果を表示する要素を以下のように配置します。
< h2 >メールアドレスバリデーション</ h2 > < form id = "validation-form" > < input type = "email" name = "email" hx-post = "validate.php" hx-trigger = "keyup changed delay:500ms" hx-target = "#validation-result" placeholder = "メールアドレスを入力" > <!-- 結果表示部分をhx-targetの外に設定 --> </ form > < div id = "validation-result" ></ div > |
フォームのinput要素には、hx-post、hx-trigger、hx-targetの属性を設定します。
hx-postで指定したPHPファイルにフォームデータを送信し、hx-targetで指定した要素にバリデーション結果を表示します。
hx-trigger属性をkeyup changed delay:500msに設定することで、キー入力や変更から500ミリ秒後にバリデーションがトリガーされます。
バリデーション結果の動的表示
次に、PHPを使ってバリデーション結果を動的に生成します。
validate.phpというPHPファイルを作成し、以下のようなコードを記述します。
<?php // メールアドレスがPOSTされたかどうかを確認 if (isset( $_POST [ 'email' ])) { $email = $_POST [ 'email' ]; if ( empty ( $email )) { // 未入力の場合は、何も表示しない echo "<span id='empty'></span>" ; } elseif (!filter_var( $email , FILTER_VALIDATE_EMAIL)) { // メールアドレスが無効な場合、赤色で表示 echo "<span style='color: red;'>無効なメールアドレスです。</span>" ; } else { // メールアドレスが有効な場合、緑色で表示 echo "<span style='color: green;'>有効なメールアドレスです。</span>" ; } } ?> |
このPHPファイルでは、POSTされたメールアドレスに対してバリデーションを行います。
メールアドレスが未入力の場合は何も表示せず、無効な場合は赤色のメッセージを、有効な場合は緑色のメッセージを返します。
htmxは、input要素の値が変更されるたびにvalidate.phpを呼び出し、バリデーション結果を#validation-result要素に動的に表示します。
サーバーサイドのバリデーション処理
フォームバリデーションは、サーバーサイドでも行うことが重要です。
validate.phpでは、PHPのfilter_var関数を使ってメールアドレスの有効性を検証しています。
if (!filter_var( $email , FILTER_VALIDATE_EMAIL)) { // メールアドレスが無効な場合、赤色で表示 echo "<span style='color: red;'>無効なメールアドレスです。</span>" ; } else { // メールアドレスが有効な場合、緑色で表示 echo "<span style='color: green;'>有効なメールアドレスです。</span>" ; } |
FILTER_VALIDATE_EMAILフィルターを使うことで、メールアドレスの形式が正しいかどうかを簡単に確認できます。
無効なメールアドレスが入力された場合は、赤色のエラーメッセージを返します。
有効なメールアドレスの場合は、緑色のメッセージを返します。
これにより、ユーザーにリアルタイムでバリデーション結果を通知し、入力の修正を促すことができます。
サンプルコード
以上の内容を組み合わせた完全なサンプルコードは以下の通りです。
HTMLコード (index.html)
<! DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" > < title >インラインフォームバリデーション</ title > < script src = "https://unpkg.com/htmx.org" ></ script > </ head > < body > < h2 >メールアドレスバリデーション</ h2 > < form id = "validation-form" > < input type = "email" name = "email" hx-post = "validate.php" hx-trigger = "keyup changed delay:500ms" hx-target = "#validation-result" placeholder = "メールアドレスを入力" > <!-- 結果表示部分をhx-targetの外に設定 --> </ form > < div id = "validation-result" ></ div > </ body > </ html > |
PHPコード (validate.php)
<?php // メールアドレスがPOSTされたかどうかを確認 if (isset( $_POST [ 'email' ])) { $email = $_POST [ 'email' ]; if ( empty ( $email )) { // 未入力の場合は、何も表示しない echo "<span id='empty'></span>" ; } elseif (!filter_var( $email , FILTER_VALIDATE_EMAIL)) { // メールアドレスが無効な場合、赤色で表示 echo "<span style='color: red;'>無効なメールアドレスです。</span>" ; } else { // メールアドレスが有効な場合、緑色で表示 echo "<span style='color: green;'>有効なメールアドレスです。</span>" ; } } ?> |
このコードを実行すると、シンプルで高速なインラインフォームバリデーションが実現されます。
ユーザーがメールアドレスを入力すると、リアルタイムでバリデーション結果が表示されます。
まとめ
この記事では、htmxとPHPを組み合わせてインラインフォームバリデーションを実装する方法を解説しました。
htmxのhx-post、hx-trigger、hx-target属性を使うことで、フォームの入力内容をサーバーに送信し、バリデーション結果を動的に表示できます。
また、サーバーサイドでPHPのfilter_var関数を使ってメールアドレスの有効性を検証することで、セキュリティを高められます。
htmxとサーバーサイドの処理を連携させることで、高速で洗練されたインラインフォームバリデーションを実装できます。
この記事で紹介したテクニックを活用し、さらに発展させることで、ユーザーエクスペリエンスを向上する魅力的なフォームバリデーションを作成しましょう。