0%

Programmingプログラミングナレッジ

Posted:2016.06.21

jQueryで作成するフォームバリデーション

前回記事では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(/^[ぁ-んァ-ヶー一-龠  \r\n\t]+$/)){
            $(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(/^0\d{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の動作を中止させるように指定します。そうでない場合は送信されます。

 

最後にリセットボタンを押した時のエラー初期化も忘れないように記述しておきます。

 

 

これでフォームのバリデーション機能の出来上がりです。上記は最小限のシンプルなものですが、いろいろカスタマイズすることで、よりユーザー様に親切なフォームを作成することができそうですね。

 

最近では便利なプラグインもたくさん出ていますが、このように一から作成することでより理解が深まるのではないでしょうか。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】