- ベストアンサー
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をどのように記述すればいいでしょうか? 分かる方、教えてください。 よろしくお願いします。
- みんなの回答 (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">10</option> <option value="20">20</option> <option value="30">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">10</option> <option value="20">20</option> <option value="30">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>
その他の回答 (5)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>しかし、FireFoxではエラーメッセージが出てきませんでした。。 ?、 こちらで試してみたソースを挙げておきます。IEと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">10</option> <option value="20">20</option> <option value="30">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>
お礼
「FireFoxでエラーメッセージが出てこない」とお返事しましたが、これを試したのは会社のPCのFireFoxで、家に帰って自分のPCのFireFoxで試したらちゃんと出てきました。うーん、何だったのでしょう?? BLUEPIXYさん、alert('Please select ' + arguments[i] +' !')でselect nameによってアラートを変化させるのですね。早速、仮設置してみたいと思います!
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
蛇足ですが document.form1.Size.options.value は、 document.form1.Size.value の方が良いと思います。 (Firefox では機能しませんでした)
補足
BLUEPIXYさんの指摘を受け、 document.form1.Size.options.value を、 document.form1.Size.value に変更してIEとFireFoxで確認してみました。 しかし、FireFoxではエラーメッセージが出てきませんでした。。 引き続き、分かる方ご回答よろしくお願いします。
>>No.2 × <select name="Size"> <option value="Error">Plz select color</option> ○ <select name="Size"> <option value="Error">Plz select size</option>
<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 Size: <select name="Size"> <option value="Error">Plz select color</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> 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>
補足
xepharosさん、回答ありがとうございます。 しかし、そのページにあるselect項目全て“選択必須”にしたいので、「Both」「Color only」のチェックボタンを入れずエラーメッセージを表示させることはできるでしょうか? もし分かりましたら、引き続きご回答よろしくお願いします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
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') のようにチェックする項目を渡すようにする
お礼
yambejpさんのスクリプトを設置したら、IEでもFirefoxでも問題なく動くようになりました。 ありがとうございました!