JAVAスクリプトでのFORM入力チェックの方法

質問

JAVAスクリプトでのFORM入力チェックの方法を教えてください。
ネットでいろいろ探してはめ込んだのですが、動作するプログラムが下記のしかありませんでした。

ラジオボタンの入力チェックとプルダウンの入力チェックを同時にしたいのですがよくわかりません。

今の状態ではラジオボタンをチェックしても未入力のアラートが出てしまいます。
あとこれにプルダウンの入力チェックをつけたいのですが…

すいませんがどなたか教えてください。よろしくお願いします。

function Form_Validator(theForm)
{

var flag=false;
var i;

for(i=0; i<theForm.OPT-00-06.length; i++){
if (theForm.OPT-00-06[i].checked){
flag = true; break;
}
}

if(!flag){
alert("\"OPT-00-06\" にチェックしてください。");
return (false);
}

if(confirm("入力もれはありません。")){
return (true);
}else{
return (false);
}

<form name="form1" method="POST" action="～cgi?" onsubmit="return Form_Validator(this);">
・
・
<input type="radio" name="OPT-00-06" value="A">
<input type="radio" name="OPT-00-06" value="B">
・
・
<select name="OPT-00-07">
<option value="">選択してください</option>
<option value="80">８０</option>
<option value="81">８１</option>
・
・
・
<select name="OPT-00-08">
<option value="">選択してください</option>
<option value="35">３５ｃｍ</option>
<option value="36">３６ｃｍ</option>
・
・
・
<input type="submit" value="カートに入れる" name="submit">

<input type="reset" value="内容をクリア" name="reset">
</div>
</form>

回答No.8

yambejp · ベストアンサー

汎用性がないのが気になります。
いかのようにしてみてはどうでしょうか？

<script language=javascript>
function Form_Validator(f){
var r=new Object;
//radioをチェック
for(var i=0;i<f.length;i++){
if(f[i].type=="radio"){
if(r[f[i].name]==undefined) r[f[i].name]=false;
if(r[f[i].name]==false && f[i].checked) r[f[i].name]=true;
}
}
for(var i in r){
if(r[i]==false){
alert("\""+i+"\"にチェックしてください。");
f[i][0].focus();
return false;
}
}
//selectをチェック
for(var i=0;i<f.length;i++){
if(f[i].type=="select-one" && f[i].value==""){
alert("\""+f[i].name+"\"を選択してください。");
f[i].focus();
return false;
}
}
return confirm("入力もれはありません。");
}
</script>
<form method="POST" action="～cgi" onsubmit="return Form_Validator(this)">
OPT-00-05:
<input type="radio" name="OPT-00-05" value="A">5-A
<input type="radio" name="OPT-00-05" value="B">5-B
<hr>
OPT-00-06:
<input type="radio" name="OPT-00-06" value="A">6-A
<input type="radio" name="OPT-00-06" value="B">6-B
<hr>
OPT-00-07:<select name="OPT-00-07">
<option value="">選択してください</option>
<option value="80">８０</option>
<option value="81">８１</option>
</select>
<hr>
OPT-00-08:<select name="OPT-00-08">
<option value="">選択してください</option>
<option value="35">３５ｃｍ</option>
<option value="36">３６ｃｍ</option>
</select>
<hr>
<input type="submit" value="カートに入れる" name="go">
<input type="reset" value="内容をクリア">
</div>
</form>

ちなみにformにnameをつけて管理するのは非推奨。
submitボタンにsubmitと言う名前をつけたりresetボタンにresetという
ボタンをつけるのは誤操作につながるためやめましょう。

ねんのため、#7の対処策は
form0["OPT-00-07"]とするかform0.elements["OPT-00-07"]です。

補足

毎回親切な対応をしていただき本当にありがとうございます。
またさらなる問題が出てきました。

プルダウンをAとB用意して、Aは無料でBは有料という設定にしています。AとBの中からひとつしかモノを選べない条件で、前回教えてもらったスクリプトを組み込んでいったわけです。

それで今回はBのプルダウンの前にチェックボタンをつけて、チェックすれば有料のプルダウンが有効、チェックしなければ無効。初期状態はチェックしていない無効状態にしています。

それでまたうまく動いてくれません。おそらく条件式の部分だとは思うのですが。お手数ですがまたアドバイスをお願いい致します。

<script type='text/javascript'>
<!--

function Form_Validator() {
num=0;
flag=0;
for(i=100;i<102;i++) { if(document.form1.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("方法を選択して下さい"); }
else { num += 1; }

flag=0;
if(document.form1.elements[OPT-00-07].value == "" && document.form1.elements[CNT-06].value == "1") { flag=1; }
if(document.form1.elements[OPT-00-07].value != "" && (document.form1.elements[CNT-06].value != "1" && document.form1.elements[OPT-06-01].value == "") { flag=1; }
if(document.form1.elements[OPT-00-07].value != "" && (document.form1.elements[CNT-06].value != "1" && document.form1.elements[OPT-06-01105].value != "")) { flag=1; }
if(document.form1.elements[CNT-06].value != "1" && document.form1.elements[OPT-06-01].value == "") { flag=1; }
if(flag=="1") { alert("どちらかから選択してください"); }
else { num += 1; }

if(num == "2") { form1.submit(); }

}

function fchk6(obj) {
var frm=obj.form;
var len=frm.elements.length; /* フォームの要素数 */
if(obj.checked==true){
/* チェックボックスが選択されている場合、
　 プルダウンを有効化（disabled=false） */
frm.elements['OPT-06-01'].disabled=false;
}else{
/* チェックボックスが選択されていない場合、
　 プルダウンを無効化（disabled=true） */
frm.elements['OPT-06-01'].selectedIndex=0; /* プルダウン初期化 */
frm.elements['OPT-06-01'].disabled=true;
}
}

<form action="" method="post" name="form1">
<select name="OPT-00-07">　　　　/*無料分の選択*/
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>

<input type="checkbox" name="CNT-06" onClick='fchk6(this)' value="1" style="visibility: ">
<select name="OPT-06-01">　　　　　/*有料分の選択*/
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>

回答No.7

leap_day

こんにちは

OPT-00-07の『 - 』をそのまま『マイナス』として認識されてる可能性があるようですね（＾＾）
使うなら『 _ (shift + ろ)』を使用してください

別のnameに変えるとうまくいきました

回答No.6

leap_day

こんにちは

条件があるのであればそれにしたがってif文を組み立てていけばいいです

A,Bどちらも選択していなければエラー、
A,B両方選択していればエラー、
それ以外ならO.K.

という感じで

<script language="javascript">
<!--
function check() {
flag = 0;
if(document.form1.f1.value == "" && document.form1.f2.value == "") { flag = 1; }
if(document.form1.f1.value != "" && document.form1.f2.value != "") { flag = 1; }
if(flag == "1") { alert("A、Bどちらかから選択してください"); }
}
//-->
</script>

<form action="" method="post" name="form1">
<select name="f1">
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="f2">
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<input type="button" value="cart_in" onclick="check()">
</form>

『 && 』は『かつ(and)』、『 || 』は『または(or)』になり、
『 == 』は『イコール』、『 != 』は『ノット　イコール』になります

補足

出来の悪い人間ですいません。
もう少しお付き合いください。

前回教えていただいたプログラムと組み合わせたらエラーが出ます。
ラジオのチェックはプルダウンの条件を付け加えるまでは普通に動いておりました。とりあえずフォームでのラジオボタン部品を除いた部分を記述します。すいませんがアドバイスをお願いいたします。

function Form_Validator() {
num=0;
flag=0;
for(i=100;i<102;i++) { if(document.form1.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("方法を選択して下さい"); }
else { num += 1; }

flag = 0;
if(document.form1.OPT-00-07.value == "" && document.form1.OPT-06-01.value == "") { flag = 1; }
if(document.form1.OPT-00-07.value != "" && document.form1.OPT-06-01.value != "") { flag = 1; }
if(flag == "1") { alert("Aのどちらかから選択してください"); }
else { num += 1; }

flag = 0;
if(document.form1.OPT-00-08.value == "" && document.form1.OPT-07-01.value == "") { flag = 1; }
if(document.form1.OPT-00-08.value != "" && document.form1.OPT-07-01.value != "") { flag = 1; }
if(flag == "1") { alert("Bのどちらかから選択してください"); }
else { num += 1; }

if(num == "3") { form1.submit(); }
}

//-->
</script>

<form action="" method="post" name="form1">
<select name="OPT-00-07">
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="OPT-06-01">
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>

<select name="OPT-00-08">
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="OPT-07-01">
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>

<input type="button" value="カートに入れる" onclick="Form_Validator();">
</form>

回答No.5

leap_day

こんにちは

firefoxで試したところうまくいかなかったのでちょっと修正（－－；）

<form name="forms">にしていたら『forms』だとエラーになりました
別のnameにしてください

forms.submit();
このままではsubmitされませんでしたので
document.(フォーム名）.submit();
に変更してください

補足

ありがとうございました。
なんとか出来ました。本当にありがとうございました。

出来ればもう一つだけ教えてもらいたいことがあるのですが…

A、B２つのプルダウンをグループにしてチェックしたいのですが可能ですか？
たとえばA、Bともに初期値は「選択してください」となっており、Aだけ、もしくはBだけ選択すればスルー、両方選択、もしくは両方とも選択していない場合はエラーという形にしたいのです。

よろしければ教えていただけませんでしょうか？
よろしくお願いいたします。

回答No.4

leap_day

こんにちは

if(num=="110") { forms.submit(); }

num="110" ・・・110個もチェック項目がおありで？
<input type="hidden">などでvalue値固定のものであればチェックする必要はありませんよ？
numの個数はチェック項目数の数と同じになると思います
チェックごとに
if( ) { alert(""); }
else{num += 1; }
としているならば

forms.submit();
これは(フォーム名）.submit();となってますので
<form name="***" action="###.cgi" method="post">のnameを使って
***.submit();
となります

このどちらかが違うと何も反応しないかjavascriptエラーになります
（スクリプトエラー表示する設定にしていないならどちらも何も反応してないように感じると思います）

上記質問のままでしたら　form1.subit();　になると思うのですがこれでsubmit出来ないのであればnumの値が違うのだと思います

回答No.3

leap_day

こんにちは

<input type="hidden">の場合もelementsの数は増えていきます
elementsの番号は<input>ごとに増えていき<select>のときだけ<select></select>で１つのelementsとみなします

もしもっと簡単に（個別に）するのであれば
//text,passeord
if(document.forms.f1.value == "") { alert("id入力してください"); }
else { num += 1; }

//radioボタン
flag=0;
for(i=0;i<2;i++) { if(document.forms.f3[i].checked) {flag = 1;}}
if(flag=="0") { alert("ラジオ項目を選択して下さい"); }
else { num += 1; }

//selectボタン
if(document.forms.f4.value == "") { alert("セレクト項目を選択してください"); }
else { num +=1; }

という風にも出来ます

text,password,select,textereaはデフォルトがvalue=""なのでdocument.(フレーム名）.（input名）.valueで判別できるのですが
radio,checkboxの場合にはちょっと使いにくいかも
radioの場合は<input type="radio" value="**">とすでにvalue値が入っていますし
checkboxの場合には<input>ごとにnameが違うから・・・

for(i=0;i<2;i++) { if(document.forms.f3[i].checked) { flag=1; }}
プログラムの個数を調べる時は『1』からではなく『0』からになりますのでスタートが『i=0』となってradioの個数が２つなので（番号は『0,1』となり）終わりが『i<2』となります『i++』はループごとに１足していくということ
『i』は別にiでなくても『j』でも『n』でも自分の分かりやすいものなら何でもいいです
上のを別の書き方すると
if(document.forms.f3[0].checked) { falg=1; }
if(document.forms.f3[1].checked) { flag=1; }
となります

補足

アドバイスありがとうございました。
おかげでチェック機能は動きました。

ただ残り一箇所submit()が動きません。
最後ボタンを押したときに何も反応しないのです。
教えていただいたjavascript内の

if(num=="110") { forms.submit(); }

もしくは

<input type="button" value="カートに入れる" onclick="Form_Validator();">

どちらかをわかりやすいかたちに変更したらいけると
思うのですが…何度もすいませんが教えてください。
よろしくお願いいたします。

回答No.2

leap_day

こんにちは

色々な種類があるときにはelementsを使う方法もあります

<script language="javascript">
<!--
function check() {
num = 0;

//textの場合
if(document.forms.elements[0].value=="") { alert("id入力してください"); }
else { num += 1; }

//passwordの場合
if(document.forms.elements[1].value=="") { alert("passwordを入力してください"); }
else { num += 1; }

//radioの場合
flag=0;
for(i=2;i<4;i++) { if(document.forms.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("ラジオ項目を選択して下さい"); }
else { num += 1; }

//selectの場合
flag=0;
if(document.forms.elements[4].selectedIndex) {flag=1;}
if(flag=="0") { alert("セレクト項目を選択してください"); }
else { num +=1; }

//checkboxの場合
flag=0;
for(i=5;i<7;i++) { if(document.forms.elements[i].checked) { flag=1; }}
if(flag=="0") { alert("チェックボックスを選択してください"); }
else { num += 1; }

if(num=="5") { forms.submit(); }
}

//-->
</script>

<form action="test.cgi" method="post" name="forms">
I D：<input type="text" name="f1">
PASS：<input type="password" name="f2">
<input type="radio" name="f3" value="radio0">0
<input type="radio" name="f3" value="radio1">1
<select name="f4">
<option value="">select</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<input type="checkbox" value="check0" name="f5">0
<input type="checkbox" value="check1" name="f6">1
<input type="button" value="cart_in" onclick="check()">
<input type="reset" value="クリア">
</form>

ですので今回の場合だと

<script language="javascript">
<!--
function Form_Validator() {
num=0;
flag=0;
for(i=0;i<2;i++) { if(document.form1.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("タイプを選択して下さい"); }
else { num += 1; }

flag=0;
if(document.form1.elements[2].selectedIndex) { flag=1; }
if(flag == "0") { alert("番号を選択してください"); }
else { num += 1; }

flag=0;
if(document.form1.elements[3].selectedIndex) {flag=1; }
if(flag == "0") { alert("サイズを選択してください"); }
else { num += 1; }

if(num == "3") { form1.submit(); }
}
//-->
</script>

<form name="form1" method="POST" action="～cgi?">
・
・
<input type="radio" name="OPT-00-06" value="A">
<input type="radio" name="OPT-00-06" value="B">
・
・
<select name="OPT-00-07">
<option value="">選択してください</option>
<option value="80">８０</option>
<option value="81">８１</option>
</select>
・
・
・
<select name="OPT-00-08">
<option value="">選択してください</option>
<option value="35">３５ｃｍ</option>
<option value="36">３６ｃｍ</option>
</select>
・
・
・
<input type="button" value="カートに入れる" onclick="Form_Validator();">

<input type="reset" value="内容をクリア" name="reset">
</form>

という感じになると思います

補足

ご丁寧な回答ありがとうございました。
実際試してはいるのですが、レベルが高すぎていまいちelementsがよくわかりません。

実はこのプログラム
<input type="hidden" name="ITM-01" value="order_op01">

などの隠しボタンが多々含まれており、formの部品も１０項目以上存在しております。この場合、elementsを使い時は一つ一つ順番を数えていかなければいけないのでしょか？

あとradio、checkboxで使われているfor文のiとelementsのiの意味がわかりません。もしよろしければ教えてください。

よろしくお願いいたします。

回答No.1

system0001

こんばんは！
>var flag=false;
>if(!flag){
>alert("\"OPT-00-06\" にチェックしてください。");
>return (false);
>}
flagにfalseが入っているので!flagではtureになり、
アラートは必ずでてしまいます。

なので、
var flag = document.forms[0].OPT-00-06.value;
if (flag == null) {
　alert("\"OPT-00-06\" にチェックしてください。");
　return (false);
}
にしましょう！
ラジオボタンがチェックされていない場合にnullが入るのか""が
入るのか・・・確認していないので、実際試してみてください！
あとは、プルダウンも同じで、
var select01 = document.forms[0].OPT-00-07.value;
var select02 = document.forms[0].OPT-00-08.value;
if (select01 == null) {
//処理
}
if (select02 == null) {
//処理
}
でうまくいくと思います！
また、document.forms[0].コントロール名は
色々と記述の仕方があるみたいなので、上記で取得できない場合は
調べて試してください！
document.formで沢山ヒットします。
それでは、うまくいくといいですね！

補足

ご丁寧な回答ありがとうございました。
しかしこのプログラムに変えたとたん今度はアラートすら
出なくなり、スルーしてしまいます。

ちなみにdocument.formもNULLの件はすべて試しました。
javaスクリプトは奥が深すぎますね。