フォームから何か送信してもらう場合、未入力項目があると困るってことありませんか？
送信前にそれをチェックして警告メッセージを出せたら便利ですよね。
という訳でjQueryで簡単に未入力項目をチェックしてアラートで表示する手順を紹介します。
未入力項目をチェックするコード例
例えば次のようなフォームがあるとしましょう。
- 名前と年齢を入力する２つのinput
- その下に送信ボタン
このフォームで名前だけ入力されてないときにエラーメッセージを表示したいという設定でコード例を紹介していきます。
まず今回考えているフォームのHTMLは次の通り
1 2 3 4 5 | <form> <input id="your_name" placeholder="名前"> <input id="your_age" placeholder="年齢"> <input id="submit_btn" type="submit"> </form> |
基本的なことだと思いますが、送信ボタンを押されたときに各inputの内容をサーバー側に渡すにはformタグで囲む必要があります。
そして "submit_btn" というIDのボタンが押されたときに "your_name" というIDが降られたテキスト欄の空欄チェックをしたいわけです。
そのために必要なのが次のjQueryコード
1 2 3 4 5 6 7 8 9 10 | $(function(){ $('#submit_btn').on('click', function(){ if($('#your_name').val() === ''){ alert('名前を入力してください！'); $('#your_name').focus(); return false; } alert('送信完了！'); }); }); |
このコードでは名前のテキスト欄が空欄の時に次のような処理(４～６行目)をしています
- 警告メッセージを表示４行目の alert('名前を入力してください！'); の部分
- 名前欄にフォーカス５行目の $('#your_name').focus(); の部分
- フォーム送信をキャンセル６行目の return false; の部分
こういう風にイベント内で false を返すと本来のイベント処理をキャンセルできる
大まかに説明するとこんな感じです。
実際にどのように動作するかは次の 埋め込んだcodepen で色々試してみてください。
See the Pen 【jQuery】未入力項目をチェックしてアラートを出す by ぴー助 (@pisuke-code) on CodePen.
名前を入力していなければアラートが出て、送信処理が中断されます。
複数の未入力項目をスマートにチェックするには？
フォームで未入力チェックしたいのが１つとは限らなくて複数チェックしたいときもありますよね？
例えば先ほどの例なら名前に加えて年齢もチェックするみたいなことです。
そういうときに項目分だけチェックしてるとコードが無駄に長くなってしまいます。
例えばこういう感じで
1 2 3 4 5 6 7 8 9 10 | if($('#your_name').val() === ''){ alert('名前を入力してください！'); $(this).focus(); return false; } if($('#your_age').val() === ''){ alert('年齢を入力してください！'); $(this).focus(); return false; } |
これはさすがに無駄が多すぎますよね・・・
なのでもっと行数を少なくしてスマートにします。
それが次のコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ $('#submit_btn').on('click', function(){ let isEmpty = false; jQuery('#your_name, #your_age').each(function(){ if(jQuery(this).val() === ''){ alert('必須項目が入力されていません！'); $(this).focus(); isEmpty = true; return false; } }); if(isEmpty) return false; else alert('送信完了！'); }); }); |
このコード中でやってることを簡単に説明すると次の通り
- 未入力チェック用のフラグを用意３行目の let isEmpty = false; の部分
未入力項目があるならこのフラグをtrueに設定する - 項目分だけeach文を回す４行目の jQuery('#your_name, #your_age').each(function()... の部分
- もし未入力項目があれば isEmpty を true に８行目の isEmpty = true; の部分
未入力チェック用のフラグが必要なことと、each文で項目分だけループを回すというのポイントです。
実際にどういう動作をするかは次の CodePen で入力・送信して試してください。
See the Pen 【jQuery】複数の未入力項目をスマートにチェックする by ぴー助 (@pisuke-code) on CodePen.
どちらか一方が未入力の場合にエラーメッセージが表示されます。
ここまでのまとめ
ここまでのことを簡単にまとめると次の通り
- チェック項目が１つの時入力不備をチェックして、あればエラーメッセージ表示&clickイベントでreturn false;を実行
- チェック項目が２つ以上の時未入力チェック用フラグを用意してチェック項目分だけeachループで回してエラーチェック
２つ以上の時は処理をは雑にしないために少し工夫が必要になってきます。
これで未入力項目のままで送信されるというのを防げるんじゃないでしょうか
ではでは(´･ω･`)ﾉｼ
