- ベストアンサー
フォームの入力チェック方法
現在、アンケートフォームを作成しています。 チェックボックス、ラジオボタン、プルダウンを複数設定していますが 必須としている設問に関して未選択のまま送信ボタンを押した場合、警告ダイアログボックスを表示させるにはどのような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>
関連するQ&A
- アンケートフォームで未入力をチェックする
Web上でのアンケートフォームをASPを使って作成しています。 いくつかある質問項目の中で、ラジオボタンで作成したもののみ必須項目にしたいとおもっています。ラジオボタンを選択せずに送信ボタンをクリックした際、入力を求めるメッセージを表示させるにはどうしたらいいのでしょうか？よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- アンケートフォームの作成方法
テキストボックスとラジオボタンを数個ずつ使って、 アンケートフォームのようなものを作成しています。 入力された項目をメールで送信させるだけならできるのですが、 必須入力項目の設定ができません。 自分では必須項目に設定したつもりでも、 「送信ボタン」を押すと、 未入力でも送信されてしまいます。 CGI以外の方法で、お分りになる方いらっしゃいますでしょうか？ ソースを記述していただけると非常に助かります。
- ベストアンサー
- HTML
- 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip
選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 （参考にしていたサイトがあるのですが、忘れてしまいました・・・。） $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスとテキストフィールドを連動させて、Javascriptでチェックをかけたい
このようなアンケートがあるとします。 //アンケートスタート ●Q1 あなたはJavascriptを使いこなしていますか？ ラジオボタン回答1 使いこなしている ラジオボタン回答2 あまり使いこなしているといえない ラジオボタン回答3 ぜんぜん使いこなしていない ●Q2 Q1で「あまり使いこなしているといえない」 「ぜんぜん使いこなしていない」と回答した方のみお答えください。 その理由はどのようなものですか？ チェックボックス回答1 むずかしい チェックボックス回答2 わかりにくい チェックボックス回答3 そのほか テキストフィールド そのほかの理由（ ） 【送信ボタン】 //アンケートエンド ■上のアンケートでJavascriptを使用して 次のことをしたいのですが、教えてください。 1.Q1の2と3にチェックがあるのに、 Q2に未回答のままフォームデータを送信しようとした場合に、 アラートを表示させたい 2.Q2で3を選んだ人にもかかわらず、 そのほかの理由テキストフィールドに未記入のまま フォームデータを送信しようとした場合、 アラートを表示させたい よろしくお願いします。
- ベストアンサー
- JavaScript
- フォームの入力チェック
こんにちは、今回はホームページのワザについて教えて下さい～。 今フォームを作成してアンケートを回答してもらうページを作成中なのですが、そこで躓いてしまいました。 CGIでフォームを作成しているのですが、そのフォームの中の回答で必須項目を作りたいのです。回答していないで送信ボタンを押すとダイヤログが出て「××をご記入ください」のようなメッセージを出す・・・こんなのが理想なのです。 今普通にCGIでフォームだけは完了したのですが、そのチェック機能をjavaでつけても動いてくれないのです（泣）。全くjavaが働かず、普通に送信されてしまいます。 CGIを外してjavaだけでやろうとするとアドレスを予め設定していないという事でエラーになりますし・・・。今は <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.ks.value==""){ alert("必須項目を記入してください。"); return false; } ・ ・ ・ // --> </SCRIPT> </HEAD> <BODY><!--××× CGI Program--> <FORM action=http://www.CGIのテキストまでのパス.txt method=post onSubmit="return Check()"><INPUT type=hidden value=××@×× name=sendto><INPUT type=hidden value=/mail/××.htm name=success><!--ここまで--><A name=TOP></A> としてあります・・・。 すみません！どなたかわかる方！ぜひ教えて下さい、お願いいたします！
- ベストアンサー
- HTML
- CGIアンケートの必須事項について
CGIでアンケートを作成しています。 ラジオボックス、プルダウン、チェックボックスなどを使っていて、送信可能なところまでは出来ています。 チェックボックスでいくつかの項目と、「その他」という項目を作って、その他の場合、そのよこに配置したテキストボックスへ入力するというカタチをとっています。この設問はHTML側のneed設定で必須の設定にしています。 この場合に「その他」にチェックされた場合、その横のテキスト記述を必須にしたいですのですが、HTMLのneedで考えても限界があるように感じました。（知識不足なだけですが） IF、のようなものを使わなければいけない気がするのですが、CGI側やJavaScriptなどで設定は出来ないものでしょうか？ よかったら教えてください。
- 締切済み
- CGI
- 入力チェックをしたいです。
結構初心者です。 フォームに入力された内容をチェックしたいので、まず下記のように書きました。 <script Language="JavaScript"> <!-- function submitCheck(){ var flag = 0; // 設定開始（必須にする項目を設定します） if(document.insert.MatterID.value == ""){ flag = 1; } else if(document.insert.name.value == ""){ flag = 1; } else if(document.insert.Correspondencedate.value == ""){ flag = 1; } if(flag){ window.alert('必須項目に未入力があります。'); // チェックされていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } --> </script> で、これにチェックボックスの入力チェックも含めたいのですが、ただ else if(document.insert.bld_ReceiptNo.checked){ flag = 1; } こうするだけではダメなのですね；； どうすればいいかお知恵を拝借できませんでしょうか。
- ベストアンサー
- JavaScript
- ＪＡＶＡＳＣＲＩＰＴで送信フォームを作っています
ＪＡＶＡＳＣＲＩＰＴで送信フォームを作っています。 ラジオボタンだけが値をだしてくれません。 なにか方法はあるのでしょうか。 アンケートにつかいます。 各項目を答えるごとに裏でテキスト化されて最終的に一括送信できるようにします。
- 締切済み
- JavaScript
- 選択項目を必須にできるフリーのメールフォーム
選択項目（ラジオボタン、チェックボックス、プルダウン等）を必須にできるフリーのメールフォームのCGIやPHPをご存知の方がいましたら教えていただきたいと思います。 選択項目のいずれかを選択しなければ、送信できないといったものです。 また、こんなスクリプトを書けばいけますなどでも結構です。 どなたかお願い致します。。
- 締切済み
- CGI
- フォームへの入力リアルタイムチェック
現在、メールフォームを作成しております、 プルダウン、チェックボックス、ラジオボタン、テキストエリア を利用しておりますが、リアルタイムチェックし、 入力・選択に入力がない、選択がない、入力内容に問題がある場合は、 独自の画像（×等）＋エラーテキストを表示し、 問題がなければ、○の画像＋エラーテキストを非表示にしたいです。 おすすめなライブラリなどはございませんでしょうか。
- ベストアンサー
- JavaScript
お礼
ＵＲＬ、参考にさせていただきました。 ありがとうございました。