最近は、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はさほど意識していません。
順を追って書いていきます。
まずはユーザー名のバリデーション機能を実装していきます
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("5文字以上20文字以内である必要があります"); $("#username_error").show(); //エラーフラグ user_name_has_error = true; }else{ user_name_has_error = false; $("#username_error").hide(); } } }); |
コメントに書いてある通りです。
フォームのユーザー名の部分の文字数を取得してきて、5文字以上20文字以内出ない場合は、エラーメッセージを表示させるようにしています。
こんな感じでパスワードのバリデーションも書いていきます
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は見た目の部分を操作する印象が個人的に強かったのですが、こういった使い方もできるので面白いですね。
レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...
このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ これくらいのアプリがサクサクと作れたら気持ちいいですね。 機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。 ...
スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。 なぜ0から作るかというと、オシャレなステ...
追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です! jquery...
ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...
JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。 YouTubeの動画を参考にしました いざこれを実際に作ると環境によっては動作しません。 ローカル環境からはAjaxは使えないようです。 な...