• ベストアンサー

function validateFormについて

ショッピングサイトを制作しているWebデザイナーです。Java Scriptのfunction validateFormについて質問です。 商品をショッピングカートに入れる際、FormのsubmitでサーバーのASPにデータを受け渡す仕組みで、ユーザーがsubmitボタンをクリックした際、商品の選択項目（select）が選択されていないとエラーメッセージが出るようにしています。 選択項目（select name）は「Color」と「Size」とありますが、現在、エラーメッセージ用のJava Scriptを、 「ColorとSize両方チェック」 function validateForm() { //--------------------------------------------------- if (document.form1.Size.options.value == 'Error') { alert('Please select Size !') document.form1.Size.focus() return false } if (document.form1.Color.options.value == 'Error') { alert('Please select Color !') document.form1.Color.focus() return false } } 「Colorのみチェック」 function validateForm() { //--------------------------------------------------- if (document.form1.Color.options.value == 'Error') { alert('Please select Color !') document.form1.Color.focus() return false } } と2つ使い分けています。 この2つをひとつのファイル（.js）にまとめることはできますか？また、今後また新たな選択項目が出てきた時、ファイル（.js）を増やすのではなく、scriptの中身を追加して対応させていきたいのですが、そうするにはjava scriptをどのように記述すればいいでしょうか？ 分かる方、教えてください。 よろしくお願いします。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.6

最近のトレンドはわかりませんが、通常form内の selectの値を得る場合は、form名がf1、select名が s1だとすると f1.s1.options[f1.s1.selectedIndex].valueと する方が一般的だったと記憶しています。 ですので、以下のようなソースにするとブラウザに よるブレが少なくなりよろしいかと思います。 念のため、汎用性をみるためにformを二つ 書いておきました。参考にしてください <html> <head> <script type="text/javascript"> <!-- function validateForm(f) { for(var i=0; i<f.length;i++){ if(f[i].type=="select-one"){ if(f[i].options[f[i].selectedIndex].value=="Error"){ alert('Please select ' + f[i].name +' !'); f[i].focus(); return false; } } } return true; } //--> </script> </head> <body> <form name="form1" action="#" onsubmit="return validateForm(this)"> <select name="Size"> <option value="Error" selected>選んでください</option> <option value="10">１０</option> <option value="20">２０</option> <option value="30">３０</option> </select> <select name="Color"> <option value="Error" selected>選んでください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> </select> <input type="submit" value="送信" > </form> <form name="form2" action="#" onsubmit="return validateForm(this)"> <select name="Size"> <option value="Error" selected>選んでください</option> <option value="10">１０</option> <option value="20">２０</option> <option value="30">３０</option> </select> <select name="Color"> <option value="Error" selected>選んでください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> </select> <input type="submit" value="送信" > </form> </body> </html>

ovalearth
質問者

お礼

yambejpさんのスクリプトを設置したら、IEでもFirefoxでも問題なく動くようになりました。 ありがとうございました！

その他の回答 (5)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

＞しかし、FireFoxではエラーメッセージが出てきませんでした。。 ？、 こちらで試してみたソースを挙げておきます。ＩＥとＦｉｒｅｆｏｘで機能します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Error Check!</title> <style> <!-- --> </style> <script type="text/javascript"> <!-- function validateForm() { var len = arguments.length; for(var i=0;i<len;i++){ if (document.form1[arguments[i]].value == 'Error') { alert('Please select ' + arguments[i] +' !') document.form1[arguments[i]].focus() return false } } } //--> </script> </head> <body> <form name="form1" action="#" onsubmit="return validateForm('Color','Size')"> <select name="Size"> <option value="Error" selected>選んでください</option> <option value="10">１０</option> <option value="20">２０</option> <option value="30">３０</option> </select> <select name="Color"> <option value="Error" selected>選んでください</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> </select><br> <input type="submit" value="送信" > </form> </body> </html>

ovalearth
質問者

お礼

「FireFoxでエラーメッセージが出てこない」とお返事しましたが、これを試したのは会社のPCのFireFoxで、家に帰って自分のPCのFireFoxで試したらちゃんと出てきました。うーん、何だったのでしょう？？ BLUEPIXYさん、alert('Please select ' + arguments[i] +' !')でselect nameによってアラートを変化させるのですね。早速、仮設置してみたいと思います！

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

蛇足ですが document.form1.Size.options.value は、 document.form1.Size.value の方が良いと思います。 (Firefox では機能しませんでした）

ovalearth
質問者

補足

BLUEPIXYさんの指摘を受け、 document.form1.Size.options.value を、 document.form1.Size.value に変更してIEとFireFoxで確認してみました。 しかし、FireFoxではエラーメッセージが出てきませんでした。。 引き続き、分かる方ご回答よろしくお願いします。

noname#22259
noname#22259
回答No.3

>>No.2 × <select name="Size"> <option value="Error">Plz select color</option> ○ <select name="Size"> <option value="Error">Plz select size</option>

noname#22259
noname#22259
回答No.2

<html> <head> <script type="text/javascript"> function Disable(){ if(document.form1.rad[0].checked){ document.form1.Size.disabled=false; document.form1.rad[1].checked=false; } else {document.form1.Size.disabled=true;} } function validateForm() { if(document.form1.rad[0].checked){ //both if(document.form1.Size.options.value == 'Error'&&document.form1.Color.options.value == 'Error') { alert('Please select Size & Color !'); document.form1.Size.focus(); document.form1.Color.focus(); return false; } else if(document.form1.Size.options.value != 'Error'&&document.form1.Color.options.value == 'Error'){ alert('Please select Color !'); document.form1.Color.focus(); return false; } else if(document.form1.Size.options.value == 'Error'&&document.form1.Color.options.value != 'Error'){ alert('Please select Size !'); document.form1.Color.focus(); return false;} } else{//color only if(document.form1.Color.options.value == 'Error') { alert('Please select Color !') document.form1.Color.focus(); return false; }}} </script> <head> <body> <form name="form1"> <input type="radio" name="rad"onclick="Disable()">Both<br> <input type="radio" name="rad" onclick="Disable()">Color only &nbsp;&nbsp;Size: <select name="Size"> <option value="Error">Plz select color</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select>&nbsp;&nbsp; Color: <select name="Color"> <option value="Error">Plz select color</option> <option value="">orange</option> <option value="">skybule</option> <option value="">salmon</option> </select> <input type=button value="Validate" onclick="validateForm()"> </form> </body> </html>

ovalearth
質問者

補足

xepharosさん、回答ありがとうございます。 しかし、そのページにあるselect項目全て“選択必須”にしたいので、「Both」「Color only」のチェックボタンを入れずエラーメッセージを表示させることはできるでしょうか？ もし分かりましたら、引き続きご回答よろしくお願いします。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

１つのアイデアですが function validateForm() { var len = arguments.length; for(var i=0;i<len;i++){ if (document.form1[arguments[i]].options.value == 'Error') { alert('Please select ' + arguments[i] +' !') document.form1[arguments[i]].focus() return false } } } のような感じにして validateForm('Color') とか validateForm('Size','Color') のようにチェックする項目を渡すようにする

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • validateForm firefoxでalertが表示されません

    java scriptについて質問です。 ホームページ内のプルダウンメニューで、項目が選択されていない状態で「submit」ボタンが押された場合、「～を選択してください」というメッセージを表示させたいと思います。 そこで以下のようなfunction validateFormを書いたのですが、alertがIEでは表示されるのにfirefoxでは表示されません。 function validateForm() { if (document.form1.Prop1.options.value == 'Error') { alert('Please select aaa.') document.form1.Prop1.focus() return false } if (document.form1.Prop2.options.value == 'Error') { alert('Please select bbb.') document.form1.Prop2.focus() return false } if (document.form1.Prop3.options.value == 'Error') { alert('Please select ccc.') document.form1.Prop3.focus() return false } if (document.form1.Prop4.options.value == 'Error') { alert('Please select ddd.') document.form1.Prop4.focus() return false } if (document.form1.Prop5.options.value == 'Error') { alert('Please select eee.') document.form1.Prop5.focus() return false } } firefoxでもalertを表示させるには、どのようにすればいいでしょうか？ 教えてくださいませ。よろしくお願いします。

  • ドロップダウンリストボックスが未選択時にアラートウインドウを出したい。

    ドロップダウンリストボックスが選択されていない場合にアラートウインドウを出したいのですがうまくいきません。 どこが間違っているのでしょうか？ 初歩的な質問で申し訳ありませんがご指摘よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> function check(fm) { if (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択' & fm.color.options[fm.color.selectedIndex].text == 'カラーを選択') { alert("サイズとカラーを選択してください！"); return false; } else { if (fm.color.options[fm.color.selectedIndex].text == 'カラーを選択') { alert("カラーを選択してください！"); return false; } else (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択') { alert("サイズを選択してください！"); return false; } } } </script> </head> <body> <FORM name="fm" onsubmit="return check(this)" action="" method="POST"> <SELECT name="color"><OPTION>カラーを選択</OPTION><OPTION>赤</OPTION><OPTION>青</OPTION></SELECT> <SELECT name="size"><OPTION>サイズを選択</OPTION><OPTION>S</OPTION><OPTION>M</OPTION></SELECT> <INPUT type="submit" value="カートに入れる"> </FORM> </body> </html>

  • フォームの入力チェックをすると既に入力した項目が消える

    実は過去のＱ＆Ａの中でご紹介されていた ホームページを拝見させて頂いたのですが、 残念ながら私の応用力が足りず、 上手く作ることが出来ません。 下記のように書いてみたのですが、 これでは未入力のメッセージにＯＫを押すと その前に入力したものが全て消えてしまいます。 何方か、正しい書き方をご教示下さいますよう 宜しくお願い申し上げます。 <script language="JavaScript"> <!-- function checkForm(){ if(document.form1.chk1.checked == false && document.form1.chk2.checked == false) { alert('チェックなし'); return false; } { flag = 0; for ( i = 0 ; i < document.form1.radiobtn.length ; i++){ if (document.form1.radiobtn[i].checked){ flag = 1; } } if (!flag){ alert('ラジオなし'); return false; } if(document.form1.sel.selectedIndex == 0){ alert('メニューなし'); document.form1.sel.focus(); return false; } if(document.form1.bun.value == ""){ alert('文字なし'); document.form1.bun.focus(); return false; } } return true; } //--> </script>

  • return falseが効かない

    formで申し込みのステップ中に、selectで必須選択させる部分があり、値があれば、次に進むように考えています。 選択していない場合、アラート自体は表示しますが、ダイアログをOKすると、結局は次のページでsubmitしてしまいます。 本当は、止めたいのですが、、、。 気になる点としては、select部分を表示する場合としない場合があり、DBからの値によって、phpで表示しているくらいでしょうか。 javascriptを書く位置をいろいろ変えても結果はかわりません。 エラーもでません。 何か重大な間違いなどあるのでしょうか？。 <head> <script Language="JavaScript"> <!-- function check(){ var flag = 0; if(document.form.camp.options[document.form.camp.selectedIndex].value == ""){ flag = 1; } if(flag==1){ alert('選択されていません'); // 選択されていない document.form.camp.focus(); return false; // 送信を中止 } } // --> </script> </head> （～いろいろあって、、～） <form name="form" method="post" action="damy.php" onSubmit="check()"> <select name="camp" id="camp"> <option value="">--選択してください--</option> <option value="あ">あ</option> <option value="い">い</option> <option value="う">う</option> </select> （～いろいろあって、、～） <input type="submit" value="次に進む"> /form>

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

    過去にほぼ同じ質問がありましたが、それでも解決出来なかったので質問させていただきました。 フォームで未入力の項目に対してアラートとフォーカスされるようにしました。 そこにプルダウンメニューを加えたものを作ろうとしたのですが、アラートの内容が全部同じ（職業が選択されていません）になってしまった事と、アラートは表示されたのですが、プルダウンメニューを選択してもアラートが出続けてしまいます。 プルダウンメニューが未選択の場合にのみアラートを表示するにはどうしたらよいでしょうか。 <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> ご存知の方がいらっしゃいましたらご教授願います。

  • アラーと表示がうまくいきません

    <SCRIPT LANGUAGE="JavaScript"> <!-- function aaa(){ if(document.a.ADD01.selectedIndex==0){ alert("カテゴリを選んで下さい。");document.a.ADD01.focus();return false; }else if(document.a.EMAIL.value=="" &&document.a.TEL.value==""){ alert("メールアドレスか電話番を入力して下さい。"); document.a.EMAIL.focus(); return false; }else{ return true;} } // --> </SCRIPT> 上記の「メールアドレスか電話番号を入力して下さい。」のアラートを「メールアドレスを入力して下さい。」に変えたいのですが(document.a.EMAIL.value=="" && document.a.TEL.value=="")のどの部分までを消していいのか分かりません。

  • ネスケで動かないjavascriptの調べ方

    下記はセレクトボックスを選択させるためのものですが、ＩＥでは動きますが、ＮＮでは動きません。この時に、何かで調べようとするときに、「何」を調べればいいのかさっぱりです。できれば、 １番目に○を調べ、 ２番目に○を調べ、 というような手順についてアドバイスいただけないでしょうか。 <SCRIPT language=JavaScript> function submitCheck(){ for( i=0 ; i<document.main.length ; i++ ){ if(document.main.elements[i].type == "select-one" && document.main.elements[i].value == "err"){ alert("未選択項目があります。"); document.main.elements[i].focus(); return false; } } } </SCRIPT> <FORM NAME=main ACTION="sample.cgi" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded" onSubmit="return submitCheck()"> <SELECT NAME="kubun"><OPTION SELECTED value="err">↓【選択して下さい】</OPTION> <OPTION>りんご</OPTION> <OPTION>みかん</OPTION> </SELECT> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></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 {★★★ここに入れたい★★★ 　　;} } }

  • メールアドレスの入力チェックをして、正しくなければ戻る方法

    今、フォームを作っているところなのですが、 各必須事項は入力されていないと戻るように設定していますが、同じ形でメールアドレスもチェックしたいのですが、その際にxxx@***.xxxという正規の形でないと引っ掛かるようにしたいのですが、どうすればよいでしょうか？お分かりの方、是非教えてください。 よろしくお願いします。 -------------------------------------------- 現在のスクリプトは以下のような感じです。 これでは、大文字などでメールアドレスを入れられてもチェックを通してしまいますので。。 function check(){ if(document.FF.お名前_漢字.value == ""){ alert("お名前_漢字を入力してください"); document.FF.お名前_漢字.focus(); return(false); } if(document.FF.住所.value == ""){ alert("住所を入力してください"); document.FF.住所.focus(); return(false); } if(document.FF.email.value == ""){ alert("メールアドレスを入力してください"); document.FF.email.focus(); return(false); } return(true); } -------------------------------------------- そして送信ボタンを押すと、このスクリプトが働くように、 onSubmit="return check()" を設定しています。

  • radioボタンでも、うまくアラート処理したいのですが・・・

    <SCRIPT LANGUAGE="JavaScript"> <!-- // ヌル及び空欄のチェックを行う function isFilled(elm) { if (elm.value == "" || elm.value == null) return false; else return true; } function isReady(form) { // 名前の空欄のチェックを行う if (isFilled(form.name) == false) { alert("お名前を入力して下さい。"); form.name.focus(); return false; } return true; } //--> </SCRIPT> フォームによるアンケートページを作成しているのですが、 textボックスで回答が書かれていなく、空欄の部分があったら アラートを出し、そのtextボックス部分に戻す、というような 上記プログラムの流れにしています。 textボックスではうまくいくのですが、radioボタンのとき、 うまくいきません(アラートは出るが、フォームに戻らない)。 回避策を教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する