JavaScriptでフォームのバリデーションを実装する方法

フォームはサイトの主要な要素の1つであり、ユーザー情報の収集やフィードバックの受取りなど、さまざまな目的で使用されます。しかし、入力内容が期待通りでない場合に適切なエラーメッセージを表示することは、ユーザーエクスペリエンスを向上させる重要な要素です。

この記事では、JavaScriptを使用してフォームバリデーションを実装する方法を解説します。

バリデーションとは
サンプルコード
1. HTML
2. JavaScript
デモ

バリデーションとは

バリデーション（validation）、またはデータ検証、は入力されたデータが特定の条件や基準を満たしているかを確認することを指します。

以下は JavaScriptを使ってサーバーに送信する前にフォームに入力された値を検証するシンプルな例です。

それぞれの入力値に対しては以下のような検証を行います。

入力項目	検証の種類
名前	必須入力、最大文字数（○文字以内）
電話番号	電話番号の形式チェック
メールアドレス	メールアドレスの形式チェック
パスワード	半角英数・○文字以上かどうか
○○再入力	必須入力、値の一致
件名	必須入力、最大文字数（○○文字以内）
お問い合わせ内容	必須入力、最大文字数（○○文字以内）

データ検証は、データの精度、完全性、および信頼性を保証するために極めて重要です。

サンプルコード

HTMLとJavaScriptのサンプルコードは以下のとおりです。

HTML

<form id="contactForm">
    <div>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" maxlength="10" required> <!-- 仮に最大文字数10としています -->
    </div>
    <div>
        <label for="phone">電話番号:</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9\-]{9,}">
    </div>
    <div>
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" minlength="8"> <!-- 仮に8文字以上としています -->
    </div>
    <div>
        <label for="passwordConfirm">パスワード再入力:</label>
        <input type="password" id="passwordConfirm" name="passwordConfirm" required>
    </div>
    <div>
        <label for="subject">件名:</label>
        <input type="text" id="subject" name="subject" maxlength="30" required> <!-- 仮に最大文字数30としています -->
    </div>
    <div>
        <label for="message">お問い合わせ内容:</label>
        <textarea id="message" name="message" maxlength="200" required></textarea> <!-- 仮に最大文字数200としています -->
    </div>
    <div>
        <input type="submit" value="送信">
    </div>
</form>

JavaScript

// お問い合わせフォームの送信イベントを取得
document.getElementById("contactForm").addEventListener("submit", function(e) {
    
    // 各入力フィールドの値を取得
    const name = document.getElementById("name").value;
    const phone = document.getElementById("phone").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const passwordConfirm = document.getElementById("passwordConfirm").value;
    const subject = document.getElementById("subject").value;
    const message = document.getElementById("message").value;

    // 名前の検証: 未入力、または10文字を超える場合はエラー
    if (!name || name.length > 10) {
        alert("名前を正しく入力してください。");
        e.preventDefault();  // フォームの送信をキャンセル
        return;
    }

    // 電話番号の検証: 数字とハイフン以外の文字を含む場合はエラー
    const phonePattern = /^[0-9\-]+$/;
    if (!phone.match(phonePattern)) {
        alert("正しい電話番号の形式で入力してください。");
        e.preventDefault();
        return;
    }

    // パスワードの検証: 二つのパスワードフィールドの値が一致しない場合はエラー
    if (password !== passwordConfirm) {
        alert("入力されたパスワードが一致しません。");
        e.preventDefault();
        return;
    }

    // 件名の検証: 未入力、または30文字を超える場合はエラー
    if (!subject || subject.length > 30) {
        alert("件名を正しく入力してください。");
        e.preventDefault();
        return;
    }

    // お問い合わせ内容の検証: 未入力、または200文字を超える場合はエラー
    if (!message || message.length > 200) {
        alert("お問い合わせ内容を正しく入力してください。");
        e.preventDefault();
        return;
    }
});