• ベストアンサー

フォームの入力チェック方法

現在、アンケートフォームを作成しています。 チェックボックス、ラジオボタン、プルダウンを複数設定していますが 必須としている設問に関して未選択のまま送信ボタンを押した場合、警告ダイアログボックスを表示させるにはどのようなJavaScriptを設定すればいいでしょうか? JavaScriptについては全く素人の為、どなたか助けてください。 お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

ラジオボタンの未選択判定をどうやって判定するかが肝ですね。 他のは選択されているかどうかスクリプトで調べて、アラートを出し、 サブミットさせないようにするだけですから、簡単です。 簡単なのは、type="submito"のボタンは止めて、普通のボタンtype="button" にして、スクリプトでサブミット発行すればよいというわけです。

すると、全ての回答が全文表示されます。

その他の回答 (4)

回答No.5

#4です。 checkboxとかradioとか、だぶってちぇっくしているので こうりつわるいです。 ぶんぽうのちぇっくは、いかをさんこうに。 じぶんもやれよ!ってはなしですが・・・。^^; とくに <!DOCTYP とか <title>なかったり <style>とか<script>にtypeぞくせいを、かかないひととか http://openlab.ring.gr.jp/k16/htmllint/htmllint.html http://validator.w3.org/

elmo_love
質問者

お礼

URL、参考にさせていただきました。 ありがとうございました。

すると、全ての回答が全文表示されます。
回答No.4

ながくなったので、めでおうのがたいへんになりました。 なので、たくさん、むしがいそうです。 それにしても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">Q1.<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あ">1.あ       <td class="under">        <input type="radio" class="radios" name="radio1" value="02い">2.い              <td class="under">        <input type="radio" class="radios" name="radio1" value="03う">3.う     </table>  </table>  <table class="work">   <tr>    <td class="header">Q2.<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多い">1.多い       <td class="under">        <input type="radio" class="radios" name="radio2" value="02ちょうど良い">2.ちょうど良い     </table>  </table>  <table class="work">   <tr>    <td class="header">Q9.(複数回答可)      <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="01ABC">1.ABC       <td class="under3">        <input type="checkbox" class="checks" name="chkbox1" value="02DEF">2.DEF       <td class="under3">        <input type="checkbox" class="checks" name="chkbox1" value="03GHI">3.GHI     </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>

elmo_love
質問者

お礼

ありがとうございました。 HTMLも見直してやりなおしました。

すると、全ての回答が全文表示されます。
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

まあ一例ですが....(ラジオボタンはめんどう) <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>

elmo_love
質問者

お礼

ありがとうございました。

すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

漠然とした質問だと回答が難しい… とりあえず一般論でよいのなら、ぐぐったほうがいろいろ見つかる。 <一例> 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

elmo_love
質問者

補足

ご回答、ありがとうございます。 いろいろ探しては見てるんですが・・・。 漠然と質問してしまっていたのでソースを添付します。 以下のように試しては見たんですが、複数にチェックを設定する方法がわかりません。 <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">Q1.<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あ">1.あ</nobr> </td> <td class="under"> <nobr><input type="radio" class="radios" name="radio1" value="02い">2.い</nobr> </td> <td class="under"> <nobr><input type="radio" class="radios" name="radio1" value="03う">3.う</nobr> </td> </tr> </table> </td> </tr> </table> <br> <table class="work"> <tr><td class="header">Q2.<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多い">1.多い</nobr> </td> <td class="under"> <nobr><input type="radio" class="radios" name="radio2" value="02ちょうど良い">2.ちょうど良い</nobr> </td> </tr> </table> </td> </tr> </table> <br> <table class="work"> <tr><td class="header">Q9.(複数回答可)</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="01ABC">1.ABC</nobr> </td> <td class="under3"> <nobr><input type="checkbox" class="checks" name="chkbox1" value="02DEF">2.DEF</nobr> </td> <td class="under3"> <nobr><input type="checkbox" class="checks" name="chkbox1" value="03GHI">3.GHI</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>

すると、全ての回答が全文表示されます。

専門家に質問してみよう