java scriptでセレクトの入力チェックの応用

質問

ショッピングカートの商品注文ページでセレクトメニューの「選択してください」の部分でをJavascriptによるエラーチェックしたいのですが、過去の掲示板を見たら応用できるコードを見つけましたが、現在当方が使用しているショッピングカートCGI（WEB寺小屋）に応用したいと思っています。

ＪＳ部分のif(f.o.selectedIndex == 0)の「o」の部分を「o-カラー」で指定すると（日本語）スクリプトが正常に作動しないのですが、どうしてもCGI側での仕様は変更したくないし、改造もできないので、この部分を日本語指定できる解決策をご存知でしたら教えてください。

↓問題なく動作確認
------------------------------------------------------
【ＪＳ部分】

function kakunin(f)
{
　if(f.o.selectedIndex == 0)
　{
　　alert("カラーを選択してください");
　　return;
　}
}

【HTML部分】
<form name="test">
<SELECT NAME="o">
<option selected>カラーを選択</option>
<OPTION>赤色
<OPTION>青色
<option>黄色</option>
</SELECT>
<INPUT TYPE="button" VALUE="OK" onClick="kakunin(test)">
</form>
--------------------------------------------------------------

↓問題の部分認
------------------------------------------------------
【ＪＳ部分】

function kakunin(f)
{
　if(f.o-カラー.selectedIndex == 0)
　{
　　alert("カラーを選択してください");
　　return;
　}
}

【HTML部分】
<form name="test" method="post" action="test.cgi">
<select name="o-カラー">
<option value="" selected>選択</option>
<option value="レッド_0">レッド</option>
<option value="ブルー_0">ブルー</option>
<option value="イエロー_0">イエロー</option>
</select>
<input type="submit" value="カートに入れる" onClick="kakunin(test)">
<input type="hidden" name="mode" value="regist">
--------------------------------------------------------------

回答No.1

steel_gray · ベストアンサー

function kakunin(f) {
if(f.elements[0].selectedIndex == 0)//変更
//elements[0]はフォームの中の0番目の項目である事を指します。
//他にも項目がある場合は合わせて数値を変更してください。

{
alert("カラーを選択してください");
return false;//変更 falseを返してエラーの場合は送信中止
}
return true;//追加 エラーがなければ続行
}

他に、
<input type="submit">のonClickは削除し、
<from>にonsubmitを追加します。（エラーの場合に送信を中止させる為）
<form ～ onsubmit="return kakunin(test)">

お礼

非情に解りやすい回答ありがとうございました。JAVAによるエラー表示チェック方法は解決しました。Javaもいろいろと奥が深いです。

なお、解決しましたが、一点補足説明で質問させていただきましたが、お解かりになれば、お時間があるときで結構ですのでご回答をお願いいたします。

補足

丁寧な回答ありがとうございます。エラー表示についてはパーフェクト解決しました。

補足でもう一点解決できないことがあります。
カート部分のソースを全て下記に示しますが、カートチェックした場合に、エラー表示の「カラーを選択して下さい。」のＯＫクリック後にカートに追加されてしまします。上記のOnclick部分も削除して<form ～ onsubmit="return kakunin(test)">を追加しましたが、解決不能です。

申し訳ございませんが、わかれば教えていただけないでしょうか？
よろしくお願いします。

---------------------------------------------------------------
変更したＪＳ部分
function kakunin(f)
{
　if(f.elements[0].selectedIndex == 0)//変更
//elements[0]はフォームの中の0番目の項目である事を指します。
//他にも項目がある場合は合わせて数値を変更してください。

　{
　　alert("カラーを選択してください");
　　return;
　}
}
----------------------------------------------------------------
変更したHTML部分

<form name="test" method="post" action="test.cgi" onsubmit="return kakunin(test)"><!--Form Start-->
<select name="o-カラー">
<option value="" selected>選択</option>
<option value="レッド_0">レッド</option>
<option value="ブルー_0">ブルー</option>
<option value="イエロー_0">イエロー</option>
</select>
<!--Ａ表示：数量選択枠がない場合？個限定：複数はValue値変更-->
<input type="hidden" name="amount-個" value="1">
<!--Ａ表示：カートに入れるボタン-->
<input type="submit" value="カートに入れる">
<!--Ａ非表示：商品番号↓-->
<input type="hidden" name="id" value="X-1001">
<!--Ａ非表示：商品名↓-->
<input type="hidden" name="goods" value="商品名">
<!--Ａ非表示：価格↓-->
<input type="hidden" name="unit" value="1500">
<!--Ａ非表示：画像↓-->
<input type="hidden" name="gazou" value="a_t.gif">
<!--Ａ非表示：商品説明↓-->
<input type="hidden" name="setumei" value="商品説明">
<!--Ａ非表示：固定タグで必ず入れる-->
<input type="hidden" name="mode" value="regist">
</form><!--Form Finish-->

回答No.2

steel_gray

#1です。
前回の回答の　alert の次のreturnも変更、
及びその下にもreturnが追加されています。

お礼

誠にありがとうございました。
基本的なミスでした。Java scriptの基本が理解していなかったので、もう少し勉強します。いろいろとお手間をおかけしました。また、何かありましたらお願いいたします。
最後に一言：心から本当に感謝してます。これでできなかったストレスから開放されます。ありがとうございました。