jQueryでフォームの必須チェックをします。
フォームはDEMOに表示します。
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> $(function(){ $("form").submit(function(){ var chkSubmit = true; // 名前必須チェック if($("#name").val() == ""){ chkSubmit = false; } // 性別必須チェック if($(":radio:checked").length == 0){ chkSubmit = false; } return chkSubmit; }); }); </script> <!-- コーディング部分 --> </head> <body> <form> 名前（必須）<br> <input type="text" name="name" id="name"> <br><br> 性別（必須）<br> <input type="radio" name="sex" value"m">男性 <input type="radio" name="sex" value"f">女性 <br><br> メールアドレス<br> <input type="text" name="mail" id="mail" size="50"> <br><br> <input type="submit" value="登録"> </form> </body> </html> |
DEMOを見ればわかるとおり、名前と性別は必須です。
登録ボタンを押せば、$("form").submit～が実行されます。
そのロジックの中で$(“#id”).val()で名前を取得しています。空の場合、boolean変数にfalseを入れています。
次に性別で$(“:radio:checked”).lenght == 0ならチェックされていないことになるので、boolean変数にfalseを入れています。
formをsubmitする時にfalseが返るとsubmitされません。逆にtrueならsubmitされます。
これで必須チェックを行っています。
ただ、これでは不親切なので、必須項目が入力されていない場合は何らかのメッセージを表示するようにしてみます。
以下のように必須項目の後ろにspanタグを追加します。
|
1 2 3 4 |
<form> 名前（必須）<br> <input type="text" name="name" id="name"> <span class="msg"></span> |
名前欄が空の場合にメッセージを表示したいのですが、セレクタを使えば隣の要素にアクセスできるんです。
上記で言えば$(“input + span”)というように+で繋ぐことでspanタグにアクセスすることができます。
アクセスできるのはあくまでも後ろのspanタグになります。
spanタグ内にメッセージを表示するには、セレクタ.text(“文字列”)で動的に表示することができます。
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> $(function(){ $("form").submit(function(){ var chkSubmit = true; // 名前必須チェック if($("#name").val() == ""){ // メッセージ表示 $("#name+span").text("名前は必須です"); chkSubmit = false; }else{ // 空でない場合はtextを削除 $("#name+span").text(""); } // 性別必須チェック if($(":radio:checked").length == 0){ // メッセージ表示 $(":radio + span").text("性別は必須です"); chkSubmit = false; }else{ // 空でない場合はtextを削除 $(":radio + span").text(""); } return chkSubmit; }); }); </script> <!-- コーディング部分 --> </head> <body> <form> 名前（必須）<br> <input type="text" name="name" id="name"> <span></span> <br><br> 性別（必須）<br> <input type="radio" name="sex" value"m">男性 <input type="radio" name="sex" value"f">女性 <span></span> <br><br> メールアドレス<br> <input type="text" name="mail" id="mail" size="50"> <br><br> <input type="submit" value="登録"> </form> </body> </html> |
DEMOです。
これで、十分なんですが、メッセージなんで赤色にしたいですね。
ということでidに対してaddClass(クラス名)メソッドと言うのがあります。
逆にremoveClass(クラス名)メソッドもあります。
では上記のif～elseにこのメソッドを追加します。
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> $(function(){ $("form").submit(function(){ var chkSubmit = true; // 名前必須チェック if($("#name").val() == ""){ // メッセージ表示 $("#name+span").text("名前は必須です"); $("#name").addClass("error"); chkSubmit = false; }else{ // 空でない場合はtextを削除 $("#name+span").text(""); $("#name").removeClass("error"); } // 性別必須チェック if($(":radio:checked").length == 0){ // メッセージ表示 $(":radio + span").text("性別は必須です"); $(":radio").addClass("error"); chkSubmit = false; }else{ // 空でない場合はtextを削除 $(":radio + span").text(""); $(":radio").removeClass("error"); } return chkSubmit; }); }); </script> <style> .error{background-color:#FFCCCC;} .alert{color:#FF0000;font-size:small;} </style> <!-- コーディング部分 --> </head> <body> <form> 名前（必須）<br> <input type="text" name="name" id="name"> <span class="alert"></span> <br><br> 性別（必須）<br> <input type="radio" name="sex" value"m">男性 <input type="radio" name="sex" value"f">女性 <span class="alert"></span> <br><br> メールアドレス<br> <input type="text" name="mail" id="mail" size="50"> <br><br> <input type="submit" value="登録"> </form> </body> </html> |
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
