htmxを使ったインラインフォームバリデーション（JavaScript不要）

フォームのバリデーションは、ユーザー入力の正当性を確認し、エラーを防ぐために重要な機能です。
従来、フォームバリデーションの実装には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>";
    }
}
?>