＞jQuery＞jQueryでフォームのバリデーション機能を実装する
jQueryでフォームのバリデーション機能を実装する
最近は、phpとjQueryをメインに勉強しています。
今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。
完成するとこんな感じです
バリデーションフォームの概要
phpでバリデーション処理を書くと送信ボタンを押してから、バリデーション機能を働かせていましたが、jQueryを利用すればリアルタイムでバリデーションチェックを行うことができるので、簡単なチェックは可能です。
ユーザー名とパスワードとパスワード再入力の確認を行います。
また、エラーがある状態ではボタンが押せないように非活性状態なっており、エラーがない時のみボタンが押せるように活性化状態なります。
ではコードを書いていきますが、フォームの見た目をかっこよくしたいのでお決まりの、bootstrap4を使います。
jQueryのバージョンは3.3.1です。
フォームの作成
まずはフォームを作ります。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
シンプルです。
名前パスワードパスワードの確認があるだけのフォームです。
重要なのは、jQueryから操作するのでID名をきちんと識別できるようにしているところです。
ボタンのクラス名は初期状態でbtn btn-primary disabledになっていますが、バリデーションを通過した時に、btn btn-primaryというクラスに変更します。
スタイルを作る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
h2{ margin-top: 30px; color: blue; } table{ margin: 100px; } td{ padding: 10px; } .error_meaasage{ color: red; } |
cssは大したことをやっていませんが、エラーメッセージは赤文字で表示させるようにします。
基本的にはbootstrap4を使っていれば、おしゃれなフォームが作れるので、cssはさほど意識していません。
jQueryでバリデーション機能を実装していく
順を追って書いていきます。
まずはユーザー名のバリデーション機能を実装していきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
$(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(); } } }); |
コメントに書いてある通りです。
フォームのユーザー名の部分の文字数を取得してきて、５文字以上２０文字以内出ない場合は、エラーメッセージを表示させるようにしています。
こんな感じでパスワードのバリデーションも書いていきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
//パスワードのチェック $("#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; } } |
やっていることは、ユーザー名のバリデーションの時とほとんど同じです。
次にボタンを押す時の動作です。
ここで全てのバリデーションを通過しているか確認し、エラーがない場合のみボタン押下時に送信できるようにします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$("#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; } }); |
これもやっていることはシンプルです。
最後に、ボタンのクラス名を変更する処理です。
エラーがない場合のみ、ボタンの見た目を変えるようにクラス名を変更していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//フォーム内で変更が起きた時 $("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は見た目の部分を操作する印象が個人的に強かったのですが、こういった使い方もできるので面白いですね。
