- ベストアンサー
フォームの入力チェック方法
現在、アンケートフォームを作成しています。 チェックボックス、ラジオボタン、プルダウンを複数設定していますが 必須としている設問に関して未選択のまま送信ボタンを押した場合、警告ダイアログボックスを表示させるにはどのようなJavaScriptを設定すればいいでしょうか？ JavaScriptについては全く素人の為、どなたか助けてください。 お願いします。
- elmo_love
- お礼率70% (14/20)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ラジオボタンの未選択判定をどうやって判定するかが肝ですね。 他のは選択されているかどうかスクリプトで調べて、アラートを出し、 サブミットさせないようにするだけですから、簡単です。 簡単なのは、type="submito"のボタンは止めて、普通のボタンtype="button" にして、スクリプトでサブミット発行すればよいというわけです。
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
＃４です。 checkboxとかradioとか、だぶってちぇっくしているので こうりつわるいです。 ぶんぽうのちぇっくは、いかをさんこうに。 じぶんもやれよ！ってはなしですが・・・。^^; とくに <!DOCTYP とか <title>なかったり <style>とか<script>にtypeぞくせいを、かかないひととか http://openlab.ring.gr.jp/k16/htmllint/htmllint.html http://validator.w3.org/
- babu_baboo
- ベストアンサー率51% (268/525)
ながくなったので、めでおうのがたいへんになりました。 なので、たくさん、むしがいそうです。 それにしてもHTMLのぶんぽうが、ぐだぐだです。 みなおすべきでは？ とうこう、もじすうにのせいげんに、ひっかかりそうな・・・。 ぜんかくくはくは、はんかくにでもなおしてね。 ばぶぅ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> table, hr { margin-bottom: 1em; } p { margin: 0 } </style> <body> <form name="frmQA" action="545.cgi" method="post" target="_top"> <p>#ID_SESSION</p> <hr> <div class="comment_info"> 以下各設問へのご回答をお願いいたします。 </div> <table class="work"> <tr> <td class="header">Ｑ１.<span class="required">≪必須項目≫</span> <tr> <td> <table class="work_small"> <tr> <td> <input type="hidden" name="Q1" value="radio1"> <tr> <td class="under"> <input type="radio" class="radios" name="radio1" value="01あ">１．あ <td class="under"> <input type="radio" class="radios" name="radio1" value="02い">２．い <td class="under"> <input type="radio" class="radios" name="radio1" value="03う">３．う </table> </table> <table class="work"> <tr> <td class="header">Ｑ２.<span class="required">≪必須項目≫</span> <tr> <td> <input type="hidden" name="flg_radio2" value="2"> <table class="work_small"> <tr> <td> <input type="hidden" name="Q2" value="radio2"> <tr> <td class="under"> <input type="radio" class="radios" name="radio2" value="01多い">１．多い <td class="under"> <input type="radio" class="radios" name="radio2" value="02ちょうど良い">２．ちょうど良い </table> </table> <table class="work"> <tr> <td class="header">Ｑ９.（複数回答可） <tr> <td> <table class="work_small"> <tr> <td> <input type="hidden" name="Q9" value="chkbox1"> <td class="under3"> <input type="checkbox" class="checks" name="chkbox1" value="01ＡＢＣ">１．ＡＢＣ <td class="under3"> <input type="checkbox" class="checks" name="chkbox1" value="02ＤＥＦ">２．ＤＥＦ <td class="under3"> <input type="checkbox" class="checks" name="chkbox1" value="03ＧＨＩ">３．ＧＨＩ </table> </table> <table class="attribute"> <tr> <td class="header">ご職業 <td class="right"> <select class="combs" name="occupation"> <option value="">（職業を選択してください）</option> <option value="01会社員・公務員">会社員・公務員</option> <option value="02会社役員">会社役員</option> <option value="03商工自営">商工自営</option> <option value="04専門職・自由業">専門職・自由業</option> </select> </table> <p> <A href="#" onClick="QA.check(true);"> <img src="../image/stockholder/cheack.gif" alt="送 信" border="0"> </A> <A href="#" onClick="QA.form.reset()"> <img src="../image/stockholder/reset.gif" alt="リセット" width="75" height="25" border="0"> </A> </p> </form> <script type="text/javascript"> var NullChecker = function ( form ) { this.list = [ ]; this.mess = '入力されていない項目があります'; this.add = function ( name ) { var c = 0, n; while( n = arguments[ c++ ] ) this.list.push( n ); }; this.setMessage = function ( message ) { this.mess = message; }; this.getValue = function ( inp ) { var d = document; var counter = 0; var es, e; if( 'string' === typeof inp ) es = d.getElementsByName( inp ) || [ d.getElementById( inp ) ]; else es = [ inp ]; while( e = es[ counter++ ] ) { switch( e.type ) { case 'hidden' : case 'submit': case 'text': case 'button' : case 'reset' : case 'textarea': return e.value; break; case 'checkbox': case'radio': if( e.checked ) return e.value; break; case 'select-one': // case 'select-multiple': var cnt = 0, o; while( o = e.options[ cnt++ ] ) if( o.selected ) return e.value; break; default: } } return ''; }; this.check = function ( mode ) { var cnt = 0; var e, n; while( e = this.list[ cnt++ ] ) { n = e.name || e.id; if( '' === this.getValue( n ) ) { this.mess && alert( this.mess ); return false; } } mode && this.form.submit(); return true; }; if( 'string' === typeof form ) form = document.forms[ form ]; if( 'FORM' !== form.nodeName ) return alert( "Error !!" ); this.form = form; var es = form.elements; var e; var c = 0; while( e = es[ c++ ] ) /hidden|submit|reset|button/.test( e.type ) || this.list.push( e ); } var QA = new NullChecker( 'frmQA' ); </script>
お礼
ありがとうございました。 HTMLも見直してやりなおしました。
- yyr446
- ベストアンサー率65% (870/1330)
まあ一例ですが．．．．(ラジオボタンはめんどう) <script type="text/javascript"> <!-- function checkform(form){ var checkflg = true; for(var i=0;i<form.length;i++){ if(form[i].className=="Required"){ if(form[i].nodeName=="INPUT"){ switch(form[i].getAttribute("TYPE")){ case "text": if(form[i].value=="")cancel_submit(); break; case "checkbox": if(!form[i].checked)cancel_submit(); break; case "radio": //????? break; } }else{ if (form[i].value=="")cancel_submit(); } } } if(checkflg){ return true; }else return fales; } function cancel_submit(){ alert("だめです"); checkflg = false; } } // --> </script> <form onSubmit="return checkform(this)"> <input type="text" class="Required"> <input type="checkbox" class="Required"> <input type="radio" name="radio1" class="Required"> <input type="radio" name="radio1" class="Required"> <textarea class="Required"></textarea> <select name="sel1" class="Required"> <option value=""></option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> <div> <input type="text" class="Required"> <input type="checkbox" class="Required"> <input type="radio" name="radio2" class="Required"> <input type="radio" name="radio2" class="Required"> <textarea class="Required"></textarea> <select name="sel2" class="Required"> <option value=""></option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> </div> <input type="submit"> </form>
お礼
ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
漠然とした質問だと回答が難しい… とりあえず一般論でよいのなら、ぐぐったほうがいろいろ見つかる。 ＜一例＞ http://javascriptmarket.com/script/jsm39.html http://www.tagindex.com/javascript/form/check1.html http://allabout.co.jp/internet/javascript/subject/msubsub_001022020.htm こんなのもある http://youmos.com/news/jsvalidate
補足
ご回答、ありがとうございます。 いろいろ探しては見てるんですが・・・。 漠然と質問してしまっていたのでソースを添付します。 以下のように試しては見たんですが、複数にチェックを設定する方法がわかりません。 <script type="text/javascript"> <!-- function check(){ var flag = 0; // 設定開始（チェックする項目を設定してください） if(!document.frmQA.chkbox1.checked){ flag = 1; } // 設定終了 if(flag){ window.alert('チェックされていません'); // チェックされていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } // --> </script> </head> <body> <form name="frmQA" action="545.cgi" method=post target=_top> #ID_SESSION <hr> <BR> <div class="comment_info"> 以下各設問へのご回答をお願いいたします。 </div> <br> <table class="work"> <tr><td class="header">Ｑ１.<span class="required">≪必須項目≫</span></td> </tr> <tr><td><table class="work_small"> <nobr> <input type="hidden" name="Q1" value="radio1"></nobr> <tr> <td class="under"> <nobr><input type="radio" class="radios" name="radio1" value="01あ">１．あ</nobr> </td> <td class="under"> <nobr><input type="radio" class="radios" name="radio1" value="02い">２．い</nobr> </td> <td class="under"> <nobr><input type="radio" class="radios" name="radio1" value="03う">３．う</nobr> </td> </tr> </table> </td> </tr> </table> <br> <table class="work"> <tr><td class="header">Ｑ２.<span class="required">≪必須項目≫</span></td></tr> <input type="hidden" name="flg_radio2" value="2"> <tr> <td><table class="work_small"> <nobr><input type="hidden" name="Q2" value="radio2"></nobr> <tr> <td class="under"> <nobr><input type="radio" class="radios" name="radio2" value="01多い">１．多い</nobr> </td> <td class="under"> <nobr><input type="radio" class="radios" name="radio2" value="02ちょうど良い">２．ちょうど良い</nobr> </td> </tr> </table> </td> </tr> </table> <br> <table class="work"> <tr><td class="header">Ｑ９.（複数回答可）</td></tr> <tr> <td><table class="work_small"> <nobr> <input type="hidden" name="Q9" value="chkbox1"></nobr> <td class="under3"> <nobr> <input type="checkbox" class="checks" name="chkbox1" value="01ＡＢＣ">１．ＡＢＣ</nobr> </td> <td class="under3"> <nobr><input type="checkbox" class="checks" name="chkbox1" value="02ＤＥＦ">２．ＤＥＦ</nobr> </td> <td class="under3"> <nobr><input type="checkbox" class="checks" name="chkbox1" value="03ＧＨＩ">３．ＧＨＩ</nobr> </td> </tr> </table> </td> </tr> </table> <br> <table class="attribute"> <tr> <td class="header">ご職業</td> <td class="right"><select class="combs" name="occupation"> <option value="00（職業を選択してください）">（職業を選択してください）</option> <option value="01会社員・公務員">会社員・公務員</option> <option value="02会社役員">会社役員</option> <option value="03商工自営">商工自営</option> <option value="04専門職・自由業">専門職・自由業</option> </select> </td> </tr> </table> <A href="#" onClick="javaScript:check();"><IMG src="../image/stockholder/cheack.gif" alt="送 信" border="0"></A> <A href="javaScript:document.frmQA.reset()"><IMG src="../image/stockholder/reset.gif" alt="リセット" width="75" height="25" border="0"></A><br>
お礼
ＵＲＬ、参考にさせていただきました。 ありがとうございました。