フォーム入力チェックの効率のよいソース

質問

こんにちは、おせわになります。

アンケートを作っています。
内容が何項目かあり、そのうちの多くがラジオボタンによるものです。
入力チェックを行う際に下記のような形で行っておりますが、
ひとつの項目につき、ラジオボタンが10個ほど用意されてるものもあり、
10個分

document.forms.reason[0].checked==false) &&

と付け足していくのは効率が悪いとおもいます。

簡潔にソースを書くにはこの部分をどう書けばいいか教えてください。
多分forを使うのかなとは思いますが
よくわかりません。

それと念のため補足ですが、ひとつの関数の中にすべてのチェックを入れたいので
性別のラジオボタン分の関数、年代のラジオボタン分の関数のように
分けずに書いています。

function aaa() {

if ((document.forms.reason[0].checked==false) && (document.forms.reason[1].checked==false)){
alert("ボタンが未選択です");
return false ;
}

if ((document.forms.sei[0].checked==false) && (document.forms.sei[1].checked==false)){
alert("ボタンが未選択です");
return false ;
}

if ((document.forms.age[0].checked==false) && (document.forms.age[1].checked==false)&& (document.forms.age[2].checked==false)&& (document.forms.age[3].checked==false)){
alert("ボタンが未選択です");
return false ;
}
・・・・・・・・・・・・・・・つづく

}
//-->
</script>

よろしくお願いします！

回答No.4

yambejp · ベストアンサー

記載のソースは問題があります。
obj[f[i].id]=true;
としていますが、idは排他的な属性なので、
ラジオボタンなどグループを指定することができないはず。

今回の件については、日本語をHTML側に埋め込む場合と、
スクリプト側に埋め込む場合があります。
わかりやすいのはHTML側でTITLEを設定してしまうこと。(aaa)
ただし若干複雑になるので理解度がひくいとはまる可能性があります。
そうでないなら、2番目のようにあらかじめアラート用のリストを
つくっておく。(bbb)
もっと個別に調整したいなら、一つ一つを手で書く。(ccc)

それぞれ見比べて、よさそうなのをつかってください。

<script language="javascript">
function aaa(f) {
obj=new Object();
for(var i=0;i<f.length;i++){
if (f[i].type=="radio" || f[i].type=="checkbox"){
if(typeof(obj[f[i].name])=="undefined") obj[f[i].name]=new Object();
if(f[i].checked){
obj[f[i].name].flg=true;
}else if(obj[f[i].name].flg!=true){
obj[f[i].name].title=f[i].title;
obj[f[i].name].flg=false;
}
}
}
for(var i in obj){
if(!obj[i].flg){
alert(obj[i].title+"がチェックされていない");
return false ;
}
}
}
function bbb(f) {
var obj=new Object();
var namelist=new Object();
namelist["reason"]="理由";
namelist["sei"]="性別";
namelist["age"]="年齢";

for(var i=0;i<f.length;i++){
if (f[i].type=="radio" || f[i].type=="checkbox"){
if(f[i].checked){
obj[f[i].name]=true;
}else if(obj[f[i].name]!=true){
obj[f[i].name]=false;
}
}
}
for(var i in obj){
if(!obj[i]){
alert(namelist[i]+"がチェックされていない");
return false ;
}
}
}
function ccc(f) {
var obj=new Object();
var namelist=new Object();
for(var i=0;i<f.length;i++){
if (f[i].type=="radio" || f[i].type=="checkbox"){
if(f[i].checked){
obj[f[i].name]=true;
}else if(obj[f[i].name]!=true){
obj[f[i].name]=false;
}
}
}
if(!obj["reason"]){
alert("理由がチェックされていない");
return false ;
}
if(!obj["sei"]){
alert("年齢がチェックされていない");
return false ;
}
if(!obj["age"]){
alert("年齢がチェックされていない");
return false ;
}
}
</script>

<form onSubmit="return aaa(this)">
reason:
<input type="radio" name="reason" value="0" title="理由">0
<input type="radio" name="reason" value="1" title="理由">1<br>
sei:
<input type="radio" name="sei" value="0" title="性別">0
<input type="radio" name="sei" value="1" title="性別">1<br>
age:
<input type="radio" name="age" value="0" title="年齢">0
<input type="radio" name="age" value="1" title="年齢">1
<input type="radio" name="age" value="2" title="年齢">2
<input type="radio" name="age" value="3" title="年齢">3
<input type="submit" value="実行">
</form>
<hr>
reason:
<form onSubmit="return bbb(this)">
<input type="radio" name="reason" value="0">0
<input type="radio" name="reason" value="1">1<br>
sei:
<input type="radio" name="sei" value="0">0
<input type="radio" name="sei" value="1">1<br>
age:
<input type="radio" name="age" value="0">0
<input type="radio" name="age" value="1">1
<input type="radio" name="age" value="2">2
<input type="radio" name="age" value="3">3
<input type="submit" value="実行">
</form>
<hr>
reason:
<form onSubmit="return ccc(this)">
<input type="radio" name="reason" value="0">0
<input type="radio" name="reason" value="1">1<br>
sei:
<input type="radio" name="sei" value="0">0
<input type="radio" name="sei" value="1">1<br>
age:
<input type="radio" name="age" value="0">0
<input type="radio" name="age" value="1">1
<input type="radio" name="age" value="2">2
<input type="radio" name="age" value="3">3
<input type="submit" value="実行">
</form>

お礼

なんどもありかどうございます！

bbbのパターンを使い、正常に動きました。
おかげさまで締め切りに間に合いそうです。
本当にありがとうございました。

回答No.3

yambejp

#2です

>今回の内容もbbbに含めた上で書きたいのですが可能でしょうか？

可能だと思いますが、やってみてだめだったらいってください。

他のものも一括でチェックするなら、こんな感じですかね。
見てわかると思いますが、ラジオだけ構造的な問題で
２段階でチェックしています

<script language=javascript>
function aaa(f){
var obj=new Object();

for(var i=0;i<f.length;i++){
switch(f[i].type){
case "text": //テキストボックス
if (f[i].value==""){
alert(f[i].name+"が入力されていない");
f[i].focus();
return false;
}
break;

case "select-one": //テキストボックス
if (f[i].value==""){
alert(f[i].name+"が選ばれていない");
f[i].focus();
return false;
}
break;

case "checkbox": //チェックボックス
if (f[i].checked==false){
alert(f[i].name+"にチェックがない");
f[i].focus();
return false;
}
break;

case "radio": //ラジオボタン
if (f[i].type=="radio"){
if(f[i].checked){
obj[f[i].name]=true;
}else if(obj[f[i].name]!=true){
obj[f[i].name]=false;
}
}
break;
}
}
for(var i in obj){
if(!obj[i]){
alert(i+"がチェックされていない");
return false ;
}
}
return true;
}
</script>

<form method="get" action="hoge.htm" onSubmit="return aaa(this)">
radio1:
<input type="radio" name="radio1" value="0">0
<input type="radio" name="radio1" value="1">1<br>
radio2:
<input type="radio" name="radio2" value="0">0
<input type="radio" name="radio2" value="1">1<br>
<hr>
select1:
<select name="select1">
<option value="">選んでください</option>
<option value="1">回答1</option>
<option value="2">回答2</option>
<option value="3">回答3</option>
</select><br>
select2:
<select name="select2">
<option value="">選んでください</option>
<option value="1">回答1</option>
<option value="2">回答2</option>
<option value="3">回答3</option>
</select><br>
<hr>
text1:<input type="text" name="text1" value=""><br>
text2:<input type="text" name="text2" value=""><br>
<hr>
checkbox1:<input type="checkbox" name="checkbox1" value="1"><br>
checkbox2:<input type="checkbox" name="checkbox2" value="1"><br>
<hr>
<input type="submit" value="実行">

</form>

ちなみにチェックボックスはどういうコンセプトで
チェックをするかわかりません。別に選ばなくても
成立するはずですから・・・
（いちおう今回は選ばないとエラーにしてありますが
こんなケースはあまり意味がないかも）

補足

すばやいお返事、ありがとうございます。
今回のも勉強になりました。

試したのですがこれですと、ご指摘の通りチェックボックスについてはすべてを選ばないとアラートになってしまい・・・、（最低一個のみ選んでいればよいのですが・・）
そこでいろいろ試したのですが、#2で教えていただいたコードに書き足してみたところ、大丈夫なようなのですがこれでよいのでしょうか。またアラート時にname+"を選んでください"と出るのですがこれを日本語の項目名にしたいときは下記のようにidでよいのでしょうか。（今回nameの名前はプログラム上変えてはいけない為）

function aaa(f) {
var obj=new Object();
for(var i=0;i<f.length;i++){
if ((f[i].type=="radio")||(f[i].type=="checkbox")){
if(f[i].checked){
obj[f[i].id]=true;
}else if(obj[f[i].id]!=true){
obj[f[i].id]=false;
}
}
}
for(var i in obj){
if(!obj[i]){
alert(i+"がチェックされていない");
return false ;
}
}

if (document.forms.age.value==""){
window.alert("年を入力！");
return false;
}
(中略)
return true;
}

すみませんがどうぞよろしくお願いいたします。

回答No.2

yambejp

こんなかんじでしょうか

<script language=javascript>
function aaa(f) {
var obj=new Object();
for(var i=0;i<f.length;i++){
if (f[i].type=="radio"){
if(f[i].checked){
obj[f[i].name]=true;
}else if(obj[f[i].name]!=true){
obj[f[i].name]=false;
}
}
}
for(var i in obj){
if(!obj[i]){
alert(i+"がチェックされていない");
return false ;
}
}
return true;
}
</script>

<form method="get" action="x.php" onSubmit="return aaa(this)">
reason:
<input type="radio" name="reason" value="0">0
<input type="radio" name="reason" value="1">1<br>
sei:
<input type="radio" name="sei" value="0">0
<input type="radio" name="sei" value="1">1<br>
age:
<input type="radio" name="age" value="0">0
<input type="radio" name="age" value="1">1
<input type="radio" name="age" value="2">2
<input type="radio" name="age" value="3">3
<input type="submit" value="実行">
</form>

補足

早速のご回答、ありがとうございます。

下記回答者様への補足もご覧頂きたいのですが、
今回のフォームにはひとつの関数の中に、テキストボックスやチェックボックス、ラジオボタンなどへの入力チェックを設定しています。
ですので上記方法でうまく行くことは行くのですが
そうするとラジオボタンのチェックのみ行われ、他のチェックが行われません。

<form method="get" action="x.php" onSubmit="return aaa(this)">のonSubmitにはすでに違う関数(bbb)が入っており、今回の内容もbbbに含めた上で書きたいのですが可能でしょうか？

説明がうまくなくすみませんがお分かりでしたら教えてください。よろしくおねがいします。

回答No.1

KanjiTalk

for (i=0; i<document.forms.reason.length; i++) {
if (document.forms.reason[i].checked == true) {
return document.forms.reason[i];
break;
}
}

としてはどうでしょうか。

補足

早速のご回答、ありがとうございます。
上記を使わせていただき、途中まではうまく行くのですがやはりうまく行きません。

function aaa(){
for (i=0; i<document.forms.reason.length; i++) {
if (document.forms.reason[i].checked == true) {
return document.forms.reason[i];
break;
}
window.alert("理由を選んでください！");
return false;

///この場合alertはどこに書いたらよいのでしょうか
それとこの一文が終わると、次のチェックがあり(今回はテキストボックス)

if (document.forms.age.value==""){
window.alert("年令を入力！");
return false;
}

///この次はチェックボックスなどと続いていきます。お答えいただいたもので一項目目はうまくチェックできたのですが、理由のラジオボタンを選択して他の項目は未記入で送信しようとするとチェックがおこなわれません。

何度もすみませんがよろしくおねがいします。