前回記事ではPHPでコンタクトフォームを作成しましたが、今回はそのコンタクトフォームに使えるフォームバリデーションをjQueryで作成してみたいと思います。   今回つくるバリデーション機能ですが、必須入力と入力形式の判別を、入力欄へのフォーカスが外れた時と送信ボタンを押したタイミングでチェックするようになっています。  

HTMLで入力フォームを作成する

formとinputタグなどでフォーム部分を作成します。各フォーム部品にはわかりやすいようにIDを振っておきます。   【form.html】※一部抜粋

<form>
    お名前：
    <input type="text" class="required" id="name" name="name" value="">
    <span class="error_required"></span>
    <span class="error_name"></span>
    メールアドレス：
    <input type="mail" class="required" id="email" name="email" value="">
    <span class="error_required"></span>
    <span class="error_email"></span>
    お電話番号：
    <input type="tel" id="tel" name="tel" value="">
    <span class="error_tel"></span>
    ウェブサイトURL：
    <input type="url" id="url" name="url" value="">
    <span class="error_url"></span>
    件名：
    <input type="text" id="subject" name="subject" value="">
    お問い合わせ内容：
    <textarea class="required" id="message" name="message" rows="5" cols="50"></textarea>
    <span class="error_required"></span>
    <button type="reset" id="reset-input" name="reset-input">やり直す</button>
    <button type="submit" id="submit-input" name="submit-input">確認画面へ</button>
</form>

  それぞれのフォーム部品にはIDを当て振ります。必須項目のフォーム部品にはrequiredのクラス名を振っています。そしてその直後にエラーメッセージテキスト挿入用のspanタグを設置します。必須項目にはerror_requiredのクラス名を、入力方法チェックにはそれぞれの入力項目に合わせたクラス名を振っています。  

jQueryでバリデーション機能を実装する

次に、jQueryでバリデーション機能を実装していきます。   【validation.js】

$(function(){
    //必須項目チェック
    $(".required").blur(function(){
        if($(this).val() == ""){
            $(this).siblings('span.error_required').text("※入力必須項目です");
            $(this).addClass("errored");
        } else {
            $(this).siblings('span.error_required').text("");
            $(this).removeClass("errored");
        }
    });
    //名前入力チェック
    $("#name").blur(function(){
        if(!$(this).val().match(/^[ぁ-んァ-ヶー一-龠 　rnt]+$/)){
            $(this).siblings('span.error_name').text("※正しく入力してください");
            $(this).addClass("errored");
        } else {
            $(this).siblings('span.error_name').text("");
            $(this).removeClass("errored");
        }
    });
    //メールアドレス入力チェック
    $("#email").blur(function(){
        if(!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/)){
            $(this).siblings('span.error_email').text("※正しく入力してください");
            $(this).addClass("errored");
        } else {
            $(this).siblings('span.error_email').text("");
            $(this).removeClass("errored");
        }
    });
    //電話番号入力チェック
    $("#tel").blur(function(){
        if(!$(this).val().match(/^0d{1,4}-d{1,4}-d{3,4}$/)){
            $(this).siblings('span.error_tel').text("※正しく入力してください");
            $(this).addClass("errored");
        } else {
            $(this).siblings('span.error_tel').text("");
            $(this).removeClass("errored");
        }
    });
    //URL入力チェック
    $("#url").blur(function(){
        if(!$(this).val().match(/http(s)?://([w-]+.)+[w-]+(/[w-./?%&=]*)?/)){
            $(this).siblings('span.error_url').text("※正しく入力してください");
            $(this).addClass("errored");
        } else {
            $(this).siblings('span.error_url').text("");
            $(this).removeClass("errored");
        }
    });
    //送信時の必須項目入力チェック
    $("#submit-input").on('click',function(){
        $(".required").each(function(){
            if($(this).val() == ""){
                $(this).siblings('span.error_required').text("※入力必須項目です");
                $(this).addClass("errored");
            }
        });
        if($(".errored").length){
            return false;
        }
    });
    //リセットボタン
    $("#reset-input").on('click',function(){
        $(".error_required,.error_name,.error_email,.error_tel,.error_url").text("");
        $("input,textarea").removeClass("errored");
    });
});

  まずは必須項目のバリデーションから。必須項目を示すrequiredのクラス名がついたフォーム部品のフォーカスが外れたタイミングで、if else文を使ってvalueの値を判別します。空の場合はエラーメッセージを挿入し、エラーを示すerroredのクラスをaddClass()で付加します。そうでない場合はエラーメッセージを削除し、erroredのクラスをremoveClass()で外すように設定します。   次に各入力方法チェックのバリデーションです。それぞれの項目に対応したIDをセレクタとして、先ほどと同じくフォーム部品のフォーカスが外れたタイミングで、if else文を使ってvalueの値を判別します。ここではmatch()を使って入力方法が正しいかをチェックしていきます。   このmatch()の引数には入力文字に応じた正規表現（詳しくはこちらの記事「フォームバリデーションで使える正規表現まとめ 」をご覧ください）を指定し、valueの値と照らし合わせます。マッチしなかった場合は同じくエラーメッセージを表示させ、エラーを示すerroredのクラスを付加します。マッチした場合はエラーメッセージとerroredのクラスの削除を行うよう設定します。   そして送信ボタンを押した時の必須入力チェックを行います。submitの指定されたボタンをクリックした時に、必須項目であるクラスrequiredを対象に、each()で対象となる要素全てに実行させます。この条件判別はif文で指定し、先ほどと同じくvalueの値が空の場合にエラーメッセージの表示とエラーを示すerroredのクラスを付加します。そうでない場合は何も実行しないようにしておきます。   その次にlengthを使って、エラーを示すerroredのクラスの有無を調べます。1つでも存在した場合は、return falseでsubmitの動作を中止させるように指定します。そうでない場合は送信されます。   最後にリセットボタンを押した時のエラー初期化も忘れないように記述しておきます。     これでフォームのバリデーション機能の出来上がりです。上記は最小限のシンプルなものですが、いろいろカスタマイズすることで、よりユーザー様に親切なフォームを作成することができそうですね。   最近では便利なプラグインもたくさん出ていますが、このように一から作成することでより理解が深まるのではないでしょうか。