- ベストアンサー
選択肢によって入力必須が変わるフォームの入力チェックJavaScript
- 特定のラジオボタンにチェックを入れた場合のみ、入力必須になるテキストボックスの入力チェックJavaScriptを教えてください。
- ラジオボタンが複数あるフォームで、タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。
- テキストボックスが空白だった場合にアラートを出すJavaScriptは、if文で括って、name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと思いますが、書き方が分からず困っています。どうかよろしくお願いします。
- goldaaa
- お礼率100% (6/6)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご質問の意図がよくわかってないですが… こんな感じ？（ライブラリは使用していません） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function check(f) { var i = 0, e, fe = f.elements, elm = fe["type"], res = false; while (e = elm[i++]) if (e.value == "type2" && e.checked) res = true; if (res && fe["name1"].value == "") { fe["name1"].style.border = "1px solid #A70F00"; alert("必須項目に未入力があります"); } else { res = false; } return !res; } //--> </script> </head> <body> <form onsubmit="return check(this)"> <input type="radio" name="type" value="type1"> <label>タイプ1</label> <input type="radio" name="type" value="type2"> <label>タイプ2</label> <br> <input type="text" name="name1"> </form> </body> </html>
お礼
回答のコードでは動かず、 書いていただいたJavaScriptも理解できず、 どう利用してよいのかわかりませんでした・・・。 せっかく回答いただいたのに、すみません。 友人に助けてもらいながら自分ながらのコードでなんとかなりそうです。 ありがとうございました。 また、選択したラジオボタンによって 入力チェックするテキストボックスが変わるJavaScriptを 下記に記載しておきます。 他の方の参考になればと思います。 --------------------------------- function check(){ var flag = 0; var j; //ラジオボタンの入力チェック if((flag==0) && (document.form1.contact.length)) { // 選択肢が複数ある場合 flag = 1; var i; for(i = 0; i < document.form1.contact.length; i ++){ if(document.form1.contact[i].checked){ j = i; // j=0なら電話 1ならメール flag = 0; break; } } } // 設定開始（必須にする項目を設定してください） if(j==0){ //連絡方法が電話の場合 if(document.form1.tel_no.value == ""){ // 「電話」の入力をチェック flag = 2; } } if(j==1){ //連絡方法がメールの場合 if(document.form1.mail_ad.value == ""){ // 「メール」の入力をチェック flag = 3; } } // 設定終了 if(flag == 1){ window.alert('必須項目に未入力がありました'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else if(flag == 2){ window.alert('電話番号を入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else if(flag == 3){ window.alert('メールアドレスを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } }
補足
回答ありがとうございます。 はしょりすぎてしまったようです、すみません。 下記のhtmlで動きます。 今は、名前が必須項目になっていますが、 女性を選択した場合のみ必須項目にするにはどうしたらよいでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample7</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("form").submit(function(){ if($("input[name='name']").val()==""){ $("input[name='name']").css("border","1px solid red").after("必須項目です").focus() alert('必須項目が未入力です'); return false; } }) }) </script> </head> <body> <form action="check.html" method="post"> <dl> <dt>性別</dt> <dd> <input type="radio" name="gender" value="男性" /> <label>男性</label> <input type="radio" name="gender" value="女性" /> <label>女性</label> </dd> <dt>お名前</dt> <dd><input type="text" name="name" /></dd> <input type="submit" value="送信" /> </dl> </form> </body> </html>