電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：elmo_love
  • 質問日時：
  • 回答数：5件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1ベストアンサー

  • 回答者： yyr446
  • 回答日時：

ラジオボタンの未選択判定をどうやって判定するかが肝ですね。


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

No.5

  • 回答者： babu_baboo
  • 回答日時：

＃４です。


checkboxとかradioとか、だぶってちぇっくしているので
こうりつわるいです。

ぶんぽうのちぇっくは、いかをさんこうに。
じぶんもやれよ！ってはなしですが・・・。^^;
とくに
<!DOCTYP
とか
<title>なかったり
<style>とか<script>にtypeぞくせいを、かかないひととか

http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
http://validator.w3.org/
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/01/07 10:33

No.4

  • 回答者： babu_baboo
  • 回答日時：

ながくなったので、めでおうのがたいへんになりました。


なので、たくさん、むしがいそうです。
それにしても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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/01/07 10:32

No.3

  • 回答者： yyr446
  • 回答日時：

まあ一例ですが．．．．(ラジオボタンはめんどう)


<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/01/07 10:31

No.2

  • 回答者： fujillin
  • 回答日時：

漠然とした質問だと回答が難しい…



とりあえず一般論でよいのなら、ぐぐったほうがいろいろ見つかる。

＜一例＞
http://javascriptmarket.com/script/jsm39.html
http://www.tagindex.com/javascript/form/check1.h …
http://allabout.co.jp/internet/javascript/subjec …
こんなのもある
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>

補足日時：2009/12/02 13:54
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報