【jQuery】フォームの値を取得 / チェックするスクリプト
2018/09/08
jQueryを使って、フォーム内容が埋まっているか、選択されているかなどをチェックする方法のメモ。
PHPでバリデーションする前に簡易にチェックすれば、画像が必須の場合に選択し直すことも無くなりそう。
やりたいことは、
1) フォームが入力されていない場合にアラートウィンドを出す
2) サブミットが実行されないようにする
3) 赤文字で、フォームが埋まっていない旨のメッセージを表示
この3つ。
jQueryでフォームの値を取得 / チェック
jQuery Alert Dialogs
せっかくなので、アラートウィンドウを通常のアラートではなく、『jQuery Alert Dialogs』を使ってみます。
jQuery Alert Dialogs は以下の配布元よりダウンロード。
jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) | A Beautiful Blog
フォーム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 34 35 36 37 38 39 40 41 |
<p>各フォームのすぐ後に、エラーメッセージが表示されるようにします。</p> <hr /> <form method="post" enctype="multipart/form-data" action="add.php" id="MemberAddForm"> <p>テキスト</p> <input type="text" name="name" value="" id="Name"> <span class="error-message"></span> <br /><br /> <p>テキストエリア</p> <textarea name="message" cols="30" rows="4" id="Message" ></textarea> <span class="error-message"></span> <br /><br /> <p>ラジオボタン</p> <input type="radio" name="gender" value="1" id="Gender1"> <label for="Gender1">男性</label> <input type="radio" name="gender" value="2" id="Gender2"> <label for="Gender2" id="radio2">女性</label> <span class="error-message"></span> <br /><br /> <p>チェックボックス</p> <input type="checkbox" name="check" value="1" id="Check1" /><label for="Check1">チェック1</label> <input type="checkbox" name="check" value="2" id="Check2" /><label for="Check2">チェック2</label> <input type="checkbox" name="check" value="3" id="Check3" /><label for="Check3" id="chechBox3">チェック3</label> <span class="error-message"></span> <br /><br /> <p>セレクトボックス</p> <select name="fruits" id="Fruits"> <option value="">▼選択</option> <option value="1">バナナ</option> <option value="2">パイナップル</option> <option value="3">ぶどう</option> </select> <span class="error-message"></span> <br /><br /> <p>ファイル</p> <input type="file" name="file" id="File" /> <span class="error-message"></span> <br /><br /> <input type="submit" name="submit" value="確認する" /> <input type="reset" name="reset" value="リセット"> </form> |
ラジオボタンとチェックボックスの lebelタグに ID を振っているのは、エラーメッセージがラベルのあとに表示されるようにするための小細工です。
詳細は下で説明。
Javascript
ヘッダ等に下記スクリプトを記述。
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<script src="../js/jquery1.8.1.min.js"></script> <script type="text/javascript" src="../js/jquery.alerts/jquery.alerts.js"></script> <link rel="stylesheet" type="text/css" href="../js/jquery.alerts/jquery.alerts.css" media="screen" /> <script type="text/javascript"> $(function(){ $('form').submit(function(){ var checkSubmit = true; // ポップアップアラート ←(1) if ( $('#Name').val() == "" || $('#Message').val() == "" || !$("input:radio[name='gender']:checked").val() || !$("input:checkbox[name='check']:checked").val() || $("select[name=fruits]").children(':selected').val() == "" || $('#File').val() == "" ) { jAlert('入力エラーがあります。<br />エラーメッセージを参考にフォームを入力してください。', '入力エラー'); checkSubmit = false; // エラーがある場合、サブミットさせない } // (2) // テキスト if ($('#Name').val() == "") { $('#Name').addClass('form-error'); $('#Name').next().text('テキストを入力してください。'); } else { $('#Name').removeClass('form-error'); $('#Name').next().text(''); } // テキストエリア if ($('#Message').val() == "") { $('#Message').addClass('form-error'); $('#Message').next().text('テキストエリアを入力してください。'); } else { $('#Message').removeClass('form-error'); $('#Message').next().text(''); } // ラジオボタン if (!$("input:radio[name='gender']:checked").val()) { $('#ProductPublishError').addClass('form-error'); $('#radio2').next().text('ラジオボタンを選択してください。'); } else { $('#ProductPublishError').removeClass('form-error'); $('#radio2').next().text(''); } // チェックボックス if (!$("input:checkbox[name='check']:checked").val()) { $('#ProductPublishError').addClass('form-error'); $('#chechBox3').next().text('チェックボックスを選択してください。'); } else { $('#ProductPublishError').removeClass('form-error'); $('#chechBox3').next().text(''); } // セレクト if ($("select[name=fruits]").children(':selected').val() == "") { $('#Fruits').addClass('form-error'); $('#Fruits').next().text('セレクトを選択してください。'); } else { $('#Fruits').removeClass('form-error'); $('#Fruits').next().text(''); } // ファイル if ($('#File').val() == "") { $('#File').addClass('form-error'); $('#File').next().text('ファイルを選択してください。'); } else { $('#File').removeClass('form-error'); $('#File').next().text(''); } return checkSubmit; }) }); </script> |
解説
スクリプト中の(1)の辺りで各フォームに入力されているかを判定します。
未入力のフォームがあると checkSubmit を false とし、jQuery Alert Dialogs にメッセージ内容を代入します。
書式は
|
1 |
jAlert('message', 'title'); |
となり、messageにメッセージ、titleにアラートウィンドウのタイトルを設定します。
メッセージ中に <br /> 等のHTMLを使用することも可能です。
次に、(2) 部分で各フォームを判定し、赤文字で表示したいエラーメッセージを、指定したセレクタの次の要素に対し作成します。
ラジオボタンとチェックボックスの label に対してIDを振っているのはそのフォームの最後の要素の次に対してメッセージを設定したいからです。
デモ
デモはコチラから（別ウィンドウが開きます）