フォームバリデーション | フォームとユーザー入力の処理 | JavaScript 超完全入門 基本から発展までのすべて

フォームバリデーションとは？

フォームバリデーションは、ユーザーがフォームに入力したデータが正しいかどうかをチェックする機能です。今回は、送信は行わず、フォームの値をチェックしてエラーメッセージを表示するのみの例を解説します。

具体的なフォームバリデーションの例

ここでは、名前、メールアドレス、パスワードの入力をチェックするフォームバリデーションを紹介します。名前が空でないこと、メールアドレスが正しい形式であること、パスワードが6文字以上であることをチェックします。

フォームの例

HTMLコード

<form id="registrationForm">
    <label for="name">名前:</label><br>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">メールアドレス:</label><br>
    <input type="text" id="email" name="email"><br><br>
    
    <label for="password">パスワード:</label><br>
    <input type="password" id="password" name="password"><br><br>
    
    <button type="button" onclick="validateForm()">値をチェック</button>
</form>

<div id="errorMessages"></div>

JavaScriptコード

function validateForm() {
    let errorMessages = "";
    let name = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let password = document.getElementById("password").value;

    // 名前が空でないかを確認
    if (name === "") {
        errorMessages += "名前は必須です。<br>";
    }

    // メールアドレスの形式を確認
    let emailPattern = /^[^ ]+@[^ ]+.[a-z]{2,3}$/;
    if (!email.match(emailPattern)) {
        errorMessages += "メールアドレスが無効です。<br>";
    }

    // パスワードが6文字以上であることを確認
    if (password.length < 6) {
        errorMessages += "パスワードは6文字以上である必要があります。<br>";
    }

    // エラーメッセージがあれば表示
    document.getElementById("errorMessages").innerHTML = errorMessages;
}

このコードでは、送信ボタンではなく、チェックボタンを使ってフォームの値を確認しています。送信は行われず、エラーがあれば赤い文字でエラーメッセージが表示されます。

※WordPressで使用する際は、必ず「カスタムJavaScript」の欄に記入してください。

まとめ

フォームバリデーションは、ユーザーが誤ったデータを送信しないようにするための重要な手段です。今回の例では、送信せずに値のチェックのみを行い、ユーザーにエラーメッセージを表示しました。ユーザーが正しいデータを入力するためのガイドとして、このようなバリデーションを適切に活用しましょう。