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

最近は、phpとjQueryをメインに勉強しています。
今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。

ソースコードはgithub

完成するとこんな感じです

バリデーションフォームの概要

phpでバリデーション処理を書くと送信ボタンを押してから、バリデーション機能を働かせていましたが、jQueryを利用すればリアルタイムでバリデーションチェックを行うことができるので、簡単なチェックは可能です。

ユーザー名とパスワードとパスワード再入力の確認を行います。

また、エラーがある状態ではボタンが押せないように非活性状態なっており、エラーがない時のみボタンが押せるように活性化状態なります。

ではコードを書いていきますが、フォームの見た目をかっこよくしたいのでお決まりの、bootstrap4を使います。

jQueryのバージョンは3.3.1です。

フォームの作成

まずはフォームを作ります。

index.html

<body>
    
    <div class="container">
        
        <h2>バリデーションサンプル</h2>
    
    <form id="register_form" action="" method="post">
        
        <table>
         
            <tr>
                <td>UserName</td><td><input type="text" class="form-control" id="form-username" /></td><td><span class="error_meaasage" id="username_error"></span></td>
            </tr>
            
            <tr>
                <td>PassWord</td><td><input type="password" class="form-control" id="form-password" /></td><td><span class="error_meaasage" id="password_error"></span></td>
            </tr>
            
            <tr>
                <td>Retype Password</td><td><input type="password" class="form-control" id="form-retypepassword" /></td><td><span class="error_meaasage" id="retypepassword_error"></span></td>
            </tr>
            
            <tr>
                <td><button type="submit" class="btn btn-primary disabled" id="form_btn">登録する</button></td><td></td>
            </tr>
        </table>
        
    </form>
    
   </div>

</body>
</html>

<body>

<h2>バリデーションサンプル</h2>

<table>

<tr>

<td>UserName</td><td><input type="text" class="form-control" id="form-username" /></td><td><span class="error_meaasage" id="username_error"></span></td>

</tr>

<tr>

<td>PassWord</td><td><input type="password" class="form-control" id="form-password" /></td><td><span class="error_meaasage" id="password_error"></span></td>

</tr>

<tr>

<td>Retype Password</td><td><input type="password" class="form-control" id="form-retypepassword" /></td><td><span class="error_meaasage" id="retypepassword_error"></span></td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</body>

</html>

シンプルです。

名前パスワードパスワードの確認があるだけのフォームです。

重要なのは、jQueryから操作するのでID名をきちんと識別できるようにしているところです。

ボタンのクラス名は初期状態でbtn btn-primary disabledになっていますが、バリデーションを通過した時に、btn btn-primaryというクラスに変更します。

スタイルを作る

    h2{
        margin-top: 30px;
        color: blue;
    }
    
    table{
        margin: 100px;
    }
    td{
        padding: 10px;
    }
    
    .error_meaasage{
        color: red;
    }

h2{

margin-top: 30px;

color: blue;

}

table{

margin: 100px;

}

td{

padding: 10px;

}

.error_meaasage{

color: red;

}

cssは大したことをやっていませんが、エラーメッセージは赤文字で表示させるようにします。

基本的にはbootstrap4を使っていれば、おしゃれなフォームが作れるので、cssはさほど意識していません。

jQueryでバリデーション機能を実装していく

順を追って書いていきます。

まずはユーザー名のバリデーション機能を実装していきます

$(function(){
//一応エラーメッセージ部分を非表示にしておく
       $("#username_error").hide();
       $("#password_error").hide();
       $("#retypepassword_error").hide();

       //バリデーション用のフラグ
        var user_name_has_error = true;
        var password_has_error = true;
        var retype_password_has_error = true;


        //名前フォームからフォーカスが外れたとき
        $("#form-username").focusout(function(){
           check_username();
        });

        //ユーザーネームフォームのチェック処理
        function check_username(){
            //文字数を取得する
            var form_length = $("#form-username").val().length;

            if(form_length === 0){
               user_name_has_error = true;
               return;
            }


            if(form_length < 5 || form_length > 20){//5-20文字
                $("#username_error").html("５文字以上２０文字以内である必要があります");
                $("#username_error").show();
                //エラーフラグ
                user_name_has_error = true;
            }else{
                user_name_has_error = false;
                 $("#username_error").hide();

            }

        }

});

$(function(){

//一応エラーメッセージ部分を非表示にしておく

$("#username_error").hide();

$("#password_error").hide();

$("#retypepassword_error").hide();

//バリデーション用のフラグ

var user_name_has_error = true;

var password_has_error = true;

var retype_password_has_error = true;

//名前フォームからフォーカスが外れたとき

$("#form-username").focusout(function(){

check_username();

});

//ユーザーネームフォームのチェック処理

function check_username(){

//文字数を取得する

var form_length = $("#form-username").val().length;

if(form_length === 0){

user_name_has_error = true;

return;

}

if(form_length < 5 || form_length > 20){//5-20文字

$("#username_error").html("５文字以上２０文字以内である必要があります");

$("#username_error").show();

//エラーフラグ

user_name_has_error = true;

}else{

user_name_has_error = false;

$("#username_error").hide();

}

});

コメントに書いてある通りです。

フォームのユーザー名の部分の文字数を取得してきて、５文字以上２０文字以内出ない場合は、エラーメッセージを表示させるようにしています。

こんな感じでパスワードのバリデーションも書いていきます

//パスワードのチェック
        $("#form-password").focusout(function(){
           check_password();
        });



        //パスワード再確認項目のチェック
        $("#form-retypepassword").focusout(function(){
            check_retypepassword();
        });

//パスワードのチェック
        function check_password(){
            var form_length = $("#form-password").val().length;

            //そもそも入力がないときはチェック処理を行わない
            //これでボタン監視の際にエラーメッセージを出力させないようにします
            if(form_length === 0){
                password_has_error = true;
                return;
            }

            if(form_length < 8){
                $("#password_error").html("パスワードは8文字以上である必要があります");
                $("#password_error").show();
                password_has_error = true;
            }else{
                $("#password_error").hide();
                password_has_error = false;
            }
        }

        //パスワード再確認のチェック
        function check_retypepassword(){

            var form_length = $("#form-retypepassword").val().length;

            if(form_length === 0){
                retype_password_has_error = true;
                return;
            }

             //文字数でなく中身を取得する
                var password = $("#form-password").val();
                var retype_password = $("#form-retypepassword").val();
                //一致していない場合エラー
                if(password != retype_password){
                    $("#retypepassword_error").html("パスワードが一致していません");
                    $("#retypepassword_error").show();
                    retype_password_has_error = true;
                }else{
                    $("#retypepassword_error").hide();
                    retype_password_has_error = false;
                }
        }

//パスワードのチェック

$("#form-password").focusout(function(){

check_password();

});

//パスワード再確認項目のチェック

$("#form-retypepassword").focusout(function(){

check_retypepassword();

});

//パスワードのチェック

function check_password(){

var form_length = $("#form-password").val().length;

//そもそも入力がないときはチェック処理を行わない

//これでボタン監視の際にエラーメッセージを出力させないようにします

if(form_length === 0){

password_has_error = true;

return;

}

if(form_length < 8){

$("#password_error").html("パスワードは8文字以上である必要があります");

$("#password_error").show();

password_has_error = true;

}else{

$("#password_error").hide();

password_has_error = false;

}

//パスワード再確認のチェック

function check_retypepassword(){

var form_length = $("#form-retypepassword").val().length;

if(form_length === 0){

retype_password_has_error = true;

return;

}

//文字数でなく中身を取得する

var password = $("#form-password").val();

var retype_password = $("#form-retypepassword").val();

//一致していない場合エラー

if(password != retype_password){

$("#retypepassword_error").html("パスワードが一致していません");

$("#retypepassword_error").show();

retype_password_has_error = true;

}else{

$("#retypepassword_error").hide();

retype_password_has_error = false;

}

やっていることは、ユーザー名のバリデーションの時とほとんど同じです。

次にボタンを押す時の動作です。

ここで全てのバリデーションを通過しているか確認し、エラーがない場合のみボタン押下時に送信できるようにします

        $("#register_form").submit(function(){


            //再度チェックする
            check_username();
            check_password();
            check_retypepassword();

            //全てのエラーチェックを通った時のみ送信可能にする
            if(user_name_has_error == false && password_has_error == false && retype_password_has_error == false){
               return true;
            }else{
                return false;
            }

        });

$("#register_form").submit(function(){

//再度チェックする

check_username();

check_password();

check_retypepassword();

//全てのエラーチェックを通った時のみ送信可能にする

if(user_name_has_error == false && password_has_error == false && retype_password_has_error == false){

return true;

}else{

return false;

}

});

これもやっていることはシンプルです。

最後に、ボタンのクラス名を変更する処理です。
エラーがない場合のみ、ボタンの見た目を変えるようにクラス名を変更していきます。

        //フォーム内で変更が起きた時
        $("form").change(function(){

            check_username();
            check_password();
            check_retypepassword();

            //エラーがなければボタンの状態（クラス名）を変更する
            if(user_name_has_error == false && password_has_error == false && retype_password_has_error == false){
                $("#form_btn").removeClass().addClass("btn btn-primary");
            }else{
                $("#form_btn").removeClass().addClass("btn btn-primary disabled");
            }
        });

//フォーム内で変更が起きた時

$("form").change(function(){

check_username();

check_password();

check_retypepassword();

//エラーがなければボタンの状態（クラス名）を変更する

if(user_name_has_error == false && password_has_error == false && retype_password_has_error == false){

$("#form_btn").removeClass().addClass("btn btn-primary");

}else{

$("#form_btn").removeClass().addClass("btn btn-primary disabled");

}

});

これもまぁシンプルです。

注意点はクラス名を変更する時は、$(“#form_btn”).removeClass().addClass(“btn btn-primary”);とやっているように

.removeClass()でクラス名を一度削除しています。

簡単なチェックならばjQueryだけでも十分に行うことができます。

jQueryは見た目の部分を操作する印象が個人的に強かったのですが、こういった使い方もできるので面白いですね。

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。スライドメニューを作る前回記事やコンテンツが流れていくスライダーのアレを作っ...

css HTML jQuery スライドメニューデザイン

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します！微妙にカスタマイズしつつ作りましたデモこれくらいのアプリがサクサクと作れたら気持ちいいですね。機能としては新規タスクの追加タスクの編集タスクの削除タスクの完了これら全てjQueryで行なっていきます。 ...

jQuery

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。しかし、今回は0から作っていきます。なぜ0から作るかというと、オシャレなステ...

jQuery スティッキーヘッダー

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記：現在のテーマでは使用していません。現在はKYOというテーマを使っていますたまに、ふわっと表示されるかっこいい動きのあるサイトがあります。そういうサイトを見ると、真似したくなりますよね？でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です！ jquery...

inview jQuery

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか？とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。コンテンツスライダーを作るまずは作ったデモサイトをご覧く...

bxslider css HTML jQuery スライダーデザイン

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。 YouTubeの動画を参考にしましたいざこれを実際に作ると環境によっては動作しません。ローカル環境からはAjaxは使えないようです。な...

Ajax jQuery

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

バリデーションフォームの概要

フォームの作成

スタイルを作る

jQueryでバリデーション機能を実装していく

関連記事

オーバーレイをかけたスライドメニューを作った[簡単]

jQueryで超クールなタスク管理アプリを作る

レスポンシブなスティッキーヘッダーを作るチュートリアル

jquery.inviewに変更したら見やすいサイトの動きになった

記事やコンテンツが流れていくスライダーのアレを作ってみた

JQuery Ajaxを使うときにハマったこと