• ベストアンサー

プルダウンの必須チェックができない

今必須チェックのスクリプトを組んでいます。 プルダウン項目の必須チェックを行っているところで、項目を選択しても「必須入力です」というアラートが出てしまいます。 ソースは以下参照です <!-- function hissuCheck(frm) { /* 必須入力のname属性 */ var paramArray = Array(23個あるが字数制限のため省略) /* 必須入力アラート用 */ var alrtArray = Array(23個あるが字数制限のため省略); /* 配列長 */ var len = paramArray.length; for(i=0; i<len; i++) { var obj = frm.elements[paramArray[i]]; if(obj.type == "text") { if(obj.value == "") { alert(alrtArray[i]+"は必須入力です"); frm.elements[paramArray[i]].focus(); return false; } } else if (obj.type == "select") { for(varSelected=0, j=0; j<obj.length; j++) { /*選択されていたらvarSelectedフラグをプラス*/ if(obj[j].selected)varSelected++; } if(varSelected == "") { alert(alrtArray[i]+"は必須入力です"); return false; } } else { for(varChecked=0, k=0; k<obj.length; k++) { .....以下省略 } } } return true; } // --> HTML箇所も書きたかったのですが、ちょっとソースが長くなってご迷惑をおかけしてしまうと思い、割愛させて頂きました。 もし必要であれば一言頂ければと思います。 忙しい中すいませんが、どなたかご教授宜しくお願いします。

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

  • ベストアンサー
  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.6

#4,5です。 for(varChecked=0, k=0; k<obj.length; k++)の前にalert(obj[0].type);をいれて、まずオブジェクトが確実に参照されているか確認してみてください。 こちらで試したものはうまくいきました。 サンプル載せときます。 インデントは全角空白で置き換えてますのでご注意ください。 ---------- <html> <head> <title> 必須チェック </title> <script type="text/javascript"> <!-- function hissuCheck(frm) { /* 必須入力のname属性 */ var paramArray = Array("txt","color1","color2"); /* 必須入力アラート用 */ var alrtArray = Array("txt","color1","color2"); /* 配列長 */ var len = paramArray.length; for(i=0; i<len; i++) {  var obj = frm.elements[paramArray[i]];  alert(obj.type);  if(obj.type == "text") {   if(obj.value == "") {    alert(alrtArray[i]+"は必須入力です");    frm.elements[paramArray[i]].focus();    return false;   }  } else if (obj.type == "select-one" || obj.type == "select-multi") {   for(varSelected="", j=0; j<obj.options.length; j++) {    if(obj.options[j].selected)varSelected+=obj.options[j].value;   }   if(varSelected == "") {    alert(alrtArray[i]+"は必須入力です");    return false;   }  } else {   alert(obj[0].type);   for(varChecked=0, k=0; k<obj.length; k++) {    if(obj[k].type == "checkbox") {     /*選択されていたらvarCheckedフラグをプラス*/     if(obj[k].checked)varChecked++;    }   }   alert(varChecked);   if(varChecked == 0) {    alert(alrtArray[i]+"は必須入力です");    return false;   }  } } return false; } // --> </script> </head> <body> <form onsubmit="hissuCheck(this);"> <p><input type="text" name="txt" /></p> <p> <select name="color1"> <option value="">-- 選択してください --</option> <option value="白">ホワイト</option> <option value="赤">レッド</option> <option value="黄">イエロー</option> <option value="青">ブルー</option> <option value="緑">グリーン</option> </select> </p> <p> <input type="checkbox" name="color2" value="白">ホワイト</input> <input type="checkbox" name="color2" value="赤">レッド</input> <input type="checkbox" name="color2" value="黄">イエロー</input> <input type="checkbox" name="color2" value="青">ブルー</input> <input type="checkbox" name="color2" value="緑">グリーン</input> </p> <p><input type="submit" value="送信する"></p> </form> </body> </html> ----------

pgBeginImo
質問者

お礼

いつもありがとうございます。 >for(varChecked=0, k=0; k<obj.length; k++)の前にalert(obj[0].type);をいれて、まずオブジェクトが確実に参照されているか確認してみてください。 確認してみたところアラートは表示されず、for文等はスルーされて送信されてしまいました。っていうことはオブジェクトがうまく参照できてないってことでしょうか。Kuppycatさんとのソースを比較してもあまり違いがないような気がするのですが…

その他の回答 (6)

noname#23734
noname#23734
回答No.7

<form onsubmit="REQUIREDCheck(this);"> <fieldset> <legend>テキスト入力</legend> <fieldset> <legend>任意</legend> <input type="text" name="txt0"> <input type="text" name="txt1"> </fieldset> <fieldset> <legend>必須</legend> <input type="text" name="txt2"> <input type="text" name="txt3"> </fieldset> </fieldset> <fieldset> <legend>選択項目</legend> <select name="select0"> <option value="">必須</option> <option value="0">項目0</option> <option value="1">項目1</option> <option value="2">項目2</option> </select> <select name="select1"> <option value="">任意</option> <option value="0">項目0</option> <option value="1">項目1</option> <option value="2">項目2</option> </select> </fieldset> <fieldset> <legend>チェック項目</legend> <fieldset> <legend>任意</legend> <input type="checkbox" name="check0" value="0">項目0 <input type="checkbox" name="check0" value="1">項目1 <input type="checkbox" name="check0" value="2">項目2 </fieldset> <fieldset> <legend>必須</legend> <input type="checkbox" name="check1" value="0">項目0 <input type="checkbox" name="check1" value="1">項目1 </fieldset> <fieldset> <legend>チェック項目</legend> <fieldset> <legend>任意</legend> <input type="radio" name="radio0" value="0">項目0 <input type="radio" name="radio0" value="1">項目1 <input type="radio" name="radio0" value="2">項目2 </fieldset> <fieldset> <legend>必須</legend> <input type="radio" name="radio1" value="0">項目0 <input type="radio" name="radio1" value="1">項目1 </fieldset> </fieldset> <p><input type="submit" value="送信する"></p> </form> <script> REQUIRED = new Array('txt2','txt3','select0','check1','radio1') function REQUIREDCheck(Form){ for(var i=0;i<REQUIRED.length;i++){ if(REQUIRED[i].indexOf('txt') != -1){ if(Form.elements[REQUIRED[i]].value == ""){alert(REQUIRED[i]+'は必須です')} }else if(REQUIRED[i].indexOf('select') != -1){ if(Form.elements[REQUIRED[i]].value == ""){alert(REQUIRED[i]+'は必須です')} }else if(REQUIRED[i].indexOf('check') != -1){ flag=false for(var j=0;j<Form.elements[REQUIRED[i]].length;j++){ if(Form.elements[REQUIRED[i]][j].checked){flag=true} } if(!flag){alert(REQUIRED[i]+'は必須です')} }else if(REQUIRED[i].indexOf('radio') != -1){ flag=false for(var j=0;j<Form.elements[REQUIRED[i]].length;j++){ if(Form.elements[REQUIRED[i]][j].checked){flag=true} } if(!flag){alert(REQUIRED[i]+'は必須です')} } } } </script>

  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.5

#4です。 チェックボックスのほうですが、 if(obj.type == "checkbox") { を if(obj[k].type == "checkbox") { に変えてください。 forで回してるカウンタをインデックスに付けないと"undefined"になっちゃいますよ。

pgBeginImo
質問者

お礼

早速の返事ありがとうございます~~! ご指摘どおりに変更してみたのですが、2・3・・・・・個チェックつけても「必須です」というアラートが出てしまいます。 まさにセレクトの箇所と同じ症状です… せっかく回答頂いたのにすいません…

  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.4

Valueで見たらどうでしょうか。 for(varSelected=0, j=0; j<obj.options.length; j++) { /*選択されていたらvarSelectedフラグをプラス*/ if(obj[j].selected)varSelected++; } を for(varSelected="", j=0; j<obj.options.length; j++) { if(obj.options[j].selected)varSelected+=obj.options[j].value; } と変えてみてください。 あと、試した<Selete>のサンプルを以下に書いておきます。 ---------- <select name="color1"> <option value="">-- 選択してください --</option> <option value="白">ホワイト</option> <option value="赤">レッド</option> <option value="黄">イエロー</option> <option value="青">ブルー</option> <option value="緑">グリーン</option> </select> ----------

pgBeginImo
質問者

お礼

ありがとうございます! うまくいきました~~!!!なんとお礼を言えばいいのか…ホントに一日中悩んでいたので… ですがセレクトの必須チェックの後にチェックボックスの必須チェックをする予定なのですが、それもうまくいってませんでした…(泣 最初に投稿したソースの「以下省略部分」を追記します } } else { for(varChecked=0, k=0; k<obj.length; k++) { if(obj.type == "checkbox") { /*選択されていたらvarCheckedフラグをプラス*/ if(obj[k].checked)varChecked++; } } if(varChecked == 0) { alert(alrtArray[i]+"は必須入力です"); return false; } どこかおかしい箇所ありますでしょうか? 質問が重なってしまって申し訳ないですが宜しくお願いします

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

色々書いてかえってわかりづらくしてしまったようで。 if (obj.type == "select") これを if(obj.type == "select-one" || obj.type == "select-multi") と、変更してください。

pgBeginImo
質問者

お礼

いつも早い返事ありがとうございます。 すいません、うまくいかないようです。 次はセレクトボタンのチェックをスルーしていきなりチェックボックスのチェックを行うようになってしまいました… どうしたらよいのでしょうか…

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

obj.type=="select" という判定も間違っていました。 その為 else ~.....以下省略 の部分が動作しているようです。 selectの場合は<select>のmultiple属性の指定によって obj.type == "select-one" または obj.type == "select-multi" または obj.type.match("^select-") と、判定する必要があるようです。 http://1106.suac.net/johoB/JavaScript/jscripts.html#selecttype

pgBeginImo
質問者

お礼

ありがとうございます。 3通りのパターンを記述してやらないとだめってことでしょうか? 何か例みたいなものがあるとわかりやすいのですが… すいません、googleとかで調べてみたんですがわかりませんでした

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

select項目のチェックをするforループがおかしいです。 select オブジェクトの子要素であるoptionsの内容を調べてチェックすれば大丈夫だと思います。 for(varSelected=0, j=0; j<obj.options.length; j++) { if(obj.options[j].selected)varSelected++;

pgBeginImo
質問者

お礼

早速の返事ありがとうございます。 ご指摘どおりに修正して変更してみたのですが… 無理でした。 選択しても「選択してください」という旨のアラートが出てしまいます。ってことは選択したことを認識していないということになりますよね…なぜなんでしょうか…

関連するQ&A

  • checkbox必須チェック

    function hissuCheck(form) { var paramArray = Array("…24個"); var alrtArray = Array("…24個"); var len = paramArray.length; for(i=0; i<len; i++) { var obj = form.elements[paramArray[i]]; if(obj.type == "text") { if(obj.value == "") { alert(alrtArray[i]+"は必須入力です"); form.elements[paramArray[i]].focus(); return false; } } else if(obj.type == "select-one" || obj.type == "select-multi") { for(varSelected=0, j=0; j<obj.options.length; j++) { if(obj.options[j].selected)varSelected+=obj.options[j].value; } if(varSelected == 0) { alert(alrtArray[i]+"は必須入力です"); form.elements[paramArray[i]].focus(); return false; } } else { for(varChecked=0, k=0; k<obj.length; k++) { if(obj[k].type == "checkbox") { if(obj[k].checked)varChecked++; } } if(varChecked == 0) { alert(alrtArray[i]+"は必須入力です"); return false; } } } return true; } 必須チェックですが、最後のチェックボックスだけがチェックしても「…は必須です」とアラートが表示されてしまいます。どうか宜しくお願いします

  • プルダウンを必須入力にする機能を付け足したい

    テキストボックスなどを必須入力にする以下のコードに プルダウンを必須入力にする機能を付け足したいのですが、 うまくいきません… どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function chkHissu(frm){ var hissu=Array("test1","test2"); var hissu_nm = Array("テスト1","テスト2"); var len=hissu.length; for(i=0; i<len; i++){ var obj=frm.elements[hissu[i]]; if(obj.type=="text" || obj.type=="textarea" ){ if(obj.value==""){ alert(hissu_nm[i]+"は必須入力項目です"); frm.elements[hissu[i]].focus(); return false; } } } return true; } </script> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 素人考えで、 var hissu=Array("test1","test2","test3"); と var hissu_nm = Array("テスト1","テスト2","テスト3"); ifの部分に単純に obj.type=="select"を追加するだけではできませんでしたm(_ _)m 何か簡単でもいいので、解説いただけると大変喜びますm(_ _)m よろしくお願いいたします

  • 未選択のプルダウンメニューをアラートしたい

    過去に同じような質問もありましたが、いろいろ検索してこちらの過去ログを拝見しても解決できなかったので質問させてください。 フォームで未入力の項目に対してアラート&フォーカスされるようにしました。 ここに『住んでいる県』(プルダウン)を追加したいのですがどうしてもうまくいきません。 <script type='text/javascript'> <!-- function check(frm){ var hissu=Array('name','zip','sex'); var hissu_nm = Array('名前','郵便番号','性別'); var len=hissu.length; for(i=0; i<len; i++){ var obj=frm.elements[hissu[i]]; if(obj.type=='text' || obj.type=='textarea'){ if(obj.value==''){ alert(hissu_nm[i]+'は必須です'); frm.elements[hissu[i]].focus(); return false; } }else{ for(var j=0, chk=0; j<obj.length; j++){ if(obj[j].checked) chk++; } if(chk==0){   alert(hissu_nm[i]+'は必須です'); return false; } } } return true; } //--> </script> どうかお分かりになる方よろしくお願いいたします。

  • プルダウンメニューを選択していない時に送信ボタンを押した場合、(必須の)アラートを表示したい。

    過去にほぼ同じ質問がありましたが、それでも解決出来なかったので質問させていただきました。 フォームで未入力の項目に対してアラートとフォーカスされるようにしました。 そこにプルダウンメニューを加えたものを作ろうとしたのですが、アラートの内容が全部同じ(職業が選択されていません)になってしまった事と、アラートは表示されたのですが、プルダウンメニューを選択してもアラートが出続けてしまいます。 プルダウンメニューが未選択の場合にのみアラートを表示するにはどうしたらよいでしょうか。 <SCRIPT language="JavaScript"> <!-- function chkHissu(frm){ var hissu=Array('name','kana','age','mail','sex','syumi'); var hissu_nm = Array('名前','フリガナ','年齢','メールアドレス','性別','趣味'); var len=hissu.length; for(i=0; i<len; i++){ var obj=frm.elements[hissu[i]]; if(obj.type=='text' || obj.type=='textarea'){ if(obj.value==''){ alert(hissu_nm[i]+'は必須入力項目です'); frm.elements[hissu[i]].focus(); return false; } }else{ for(var j=0, chk=0; j<obj.length; j++){ if(obj[j].checked) chk++; } if(chk==0){ alert(hissu_nm[i]+'は必須入力項目です'); return false; } } } return true; } function check(value){ //数字かどうかのチェック if(isNaN(value)){ alert("数値を半角で入力してください。"); //警告コメント document.form1.age.focus(); return false; } //入力があるかどうかのチェック if(!value){ alert("年齢を入力してください。"); //警告コメント document.form1.age.focus(); return false; } } function checkAd(address){ if(!address){ alert("メールアドレスを入力してください。"); } else if(address.indexOf("@",0)<=0){ alert("メールアドレスが正しくありません。"); document.form1.mail.select(); return false; } } //-- </SCRIPT> ご存知の方がいらっしゃいましたらご教授願います。

  • 送信前のチェック

    よろしくお願い致します。 メールフォームの送信前チェックをしたく、過去記事の http://okwave.jp/qa2275666.html を使わせて頂いております。 お聞きしたいことが複数ありましたので、下記にまとめました。 ●チェックボックスの入力チェックを追加したい (↓ラジオボタンのスクリプトをチェックボックスに置き換えてみたのですが、うまく動作しませんでした。) ●メールアドレスと確認用メールアドレスが合ってるかのチェックと、できれば書式チェックを追加したい function check(frm) { var hissu=Array('name','assumedname','poatal','address','address2','tel','email','email2','sendcheck'); var hissu_nm = Array('お名前','フリカナ','郵便番号','ご住所','ご住所(建物名・部屋番号)','電話番号','メールアドレス','確認用メールアドレス','入力内容のチェック'); var len=hissu.length; for(i=0; i<len; i++) { var obj=frm.elements[hissu[i]]; if(obj.type=='text' || obj.type=='textarea') { if(obj.value=='') { alert(hissu_nm[i]+'は必須入力項目です。必ずご入力下さい。'); frm.elements[hissu[i]].focus(); return false; } } else if(obj[0].type=='radio') { for(var j=0, chk=0; j<obj.length; j++) { if(obj[j].checked) chk++; } if(chk==0) { alert(hissu_nm[i]+'は必須入力項目です。必ずご選択下さい。'); obj[0].focus(); return false; } } else if(obj.tagName=='select') { if(obj.value == '') { alert(hissu_nm[i]+'は必須入力項目です。必ずご入力下さい。'); obj.focus(); return false; } } } return true; } どうぞ、よろしくお願い致します。

  • javascriptでメールアドレスが同一か確認

    javascriptでメールアドレスが同一か確認 現在、問い合わせフォームをつくっております。 必須項目を部分的に作るのまではできたのですが、 メールアドレスを必須項目にしつつ、 メールアドレス確認の欄で同一のアドレスが記入されているのかを確かめ、 違った場合は「違います」とアラートをだしたいのです。 どのようにしたらいいのでしょうか? 急ぎの為大変困っております。 どうかご回答お願い致します。 以下はこちらのサイトを参考に作成しました http://f32.aaa.livedoor.jp/~azusa/?t=js&p=formcheck#a_chkHissu ------java部分----- <script type="text/javascript"> function sample(frm){ /* 必須入力のname属性 */ var hissu=Array("name","hurigana","mail","mail2","naiyo"); /* アラート表示用 */ var hissu_nm = Array("お名前","ふりがな","メールアドレス","メールアドレス確認","内容"); /* 必須入力の数 */ var len=hissu.length; for(i=0; i<len; i++){ var obj=frm.elements[hissu[i]]; /* テキストボックス or テキストエリアが入力されているか調べる */ if(obj.type=="text" || obj.type=="textarea"){ if(obj.value==""){ /* 入力されていなかったらアラート表示 */ alert(hissu_nm[i]+"は必須入力項目です"); /* 未入力のエレメントにフォーカスを当てる */ frm.elements[hissu[i]].focus(); return false; } }else{ /* radioボタンがチェックされているか調べる */ for(var j=0, chk=0; j<obj.length; j++){ /* チェックされていたらchkフラグをプラス */ if(obj[j].checked) chk++; } if(chk==0){ /* 1つもチェックされていない場合はfalseを返してフォーム送信しない */ alert(hissu_nm[i]+"は必須入力項目です"); return false; } } } /* 必須入力項目が全て入力されている場合はtrueを返してフォーム送信 */ return true; } </script> ------html部分----- <form action="mail/●◎●.php" name="toiawase" method="post" onsubmit="return sample(this)"> ~省略~ メールアドレス<input type="text" name="mail" value="" size="35" maxlength="60"> メールアドレス確認<input type="text" name="mail2" value="" size="35" maxlength="60"> </form> 宜しくお願い致します。

  • 複数フォームに同じnameがある場合の入力チェック

    うまく入力チェックが動作せず、行き詰まっており困っております。 アドバイスを頂ければ助かります。ソースは以下です。 function chkform(frm){ var mst=Array("dep","plan"); var mst_nm = Array("出発地","プラン"); var len=mst.length; for(i=0; i<len; i++){ var obj=frm.elements[mst[i]]; if(obj.type=="text" || obj.type=="textarea"){ if(obj.value==""){ alert(mst_nm[i]+"は必須入力項目です"); frm.elements[mst[i]].focus(); return false; } }else{ for(var j=0, chk=0; j<obj.length; j++){ if(obj[j].checked) chk++; } if(chk==0){ alert(mst_nm[i]+"は必須入力項目です"); return false; } } } return true; } <form name="order1" onsubmit="return chkform(this)"> <input type="radio" name="dep" value="osa" />大阪   <input type="radio" name="dep" value="tky">東京 <br /> <select name="plan"> <option value="">▼プランを選択▼</option> <option value="biz">出張</option> <option value="tvl">旅行</option> <option value="day">日帰り</option> </select> <br /> <input type="submit" name="btn1" value="確認"> </form> <form name="order2" onsubmit="return chkform(this)"> <input type="radio" name="dep" value="osa" />大阪   <input type="radio" name="dep" value="tky">東京 <br /> <select name="plan"> <option value="">▼プランを選択▼</option> <option value="biz">出張</option> <option value="tvl">旅行</option> <option value="day">日帰り</option> </select> <br /> <input type="submit" name="btn2" value="確認"> </form>

  • documentオブジェクトのlengthが取れない

    以下のプログラムでobjのlengthが「undefined」となる原因がわからない <script language="JavaScript"><!-- function Check() {alert("スタート"); var obj = document.frm.elements['check']; var i,j =0;alert("length="+ obj.length); for (i = 0; i < obj.length ; i++ ) { if ( obj[i].checked == true ) {j++;} } alert( 'チェックボックスの数='+ i); alert( 'チェックした数='+ j); } //--></script> <form name="frm" method="POST"><input type="checkbox" name="check" value="1"></form> <a href="javascript:Check();">チェック</a> formの中を以下のように変更すると正しく表示される <form name="frm" method="POST"><input type="checkbox" name="check" value="1"><input type="checkbox" name="check" value="2"></form> どなたか、ご教授くださいませ。

  • java script フォームのチェックボックス入力制限について

    java script フォームのチェックボックス入力制限について どなたかお教えください。 以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし)、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。 サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。 よろしくお願いします。 <script type="text/javascript"> function fchk3(obj){ var frm=obj.form; var len=frm.elements.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].checked=false; frm.elements[i].disabled=true; } } } } </script> <form name="form3" action="#"> <label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br /> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label> </form>

  • チェックボックスの選択チェック

    ラジオボタンの選択チェック、セレクトボタンの選択チェックのあとにチェックボックスの選択チェックをしたいのですが、どのように入れればよいのでしょうか。教えてください。 ↓参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++) if(document.form1.seibetu[i].checked)flag=false; } if(flag){ alert('性別が選択されていません'); return false; } if(document.form1.nenrei.value=="")flag=true; if(flag){ alert('年齢が選択されていません'); return false; } if( document.form1.Q1.length){ flag=1; var i; for(var i=0; i<document.form1.Q1.length; i++) if(document.form1.Q1[i].checked)flag=false; if(flag){ alert('Q1が選択されていません'); return false; } else {★★★ここに入れたい★★★   ;} } }