メールフォームの入力チェックが動きません

質問

前任者が制作したメールフォームの入力チェックが動かないということで、
修正をしてみたのですが、思うように動いてくれません。

javascriptで作成されていて、
テキストフォームとプルダウンのチェックまでは未入力だと、
アラートが出てくるのですが、
最後の同意のチェックボックスの未チェックはスルーされてしまいます。

問題のjavascriptは下記になります。
-----------------------------------------------------------------

var mndFileds=new Array('Company','Last Name','Email','Phone','LEADCF3','Description');
var fldLangVal=new Array('会社名','お名前','メールアドレス','お電話番号','お問い合せ種別','お問い合せ内容');

function checkMandatery(){
for(i=0;i<mndFileds.length;i++){
var fieldObj=document.forms['name1'][mndFileds[i]];
if((fieldObj) && ((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0){
alert(fldLangVal[i] +' を入力してください。');
fieldObj.focus();
return false;
}else if(fieldObj && (fieldObj.nodeName=='SELECT') && (fieldObj.options[fieldObj.selectedIndex].value=='-None-')){
alert(fldLangVal[i] +' を入力してください。');
fieldObj.focus();
return false;
}else if(document.forms['name1'].acceptance.checked){
alert('にチェックをしてください。');
return false;
}
}
}

-----------------------------------------------------------------

メールフォームのhtmlは以下になります。

-----------------------------------------------------------------

<form action='' name='name1' method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatery()' accept-charset='UTF-8'>
<p>会社名(必須):<input name='Company' type='text' size="30" maxlength='100'/></p>
<p>お名前(必須):<input name='Last Name' type='text' size="30" maxlength='80' /></p>
<p>メールアドレス(必須):<input name="Email"></p>
<p>お電話番号(必須):<input name='Phone' type='text' size="30" maxlength='30' /></p>
<p>Webサイト:<input name='Website' type='text' size="40" maxlength='120' value="http://" /></p>
<p>お問い合せ種別(必須):
<select name='LEADCF3'>
<option value='-None-'>–なし–</option>
<option value='種別1'>種別1</option>
<option value='種別2'>種別2</option>
<option value='種別3'>種別3</option>
</select></p>
<p>お問い合せ内容(必須):<textarea name='Description' cols="40" width='250' height='250'></textarea></p>
<p><input type="checkbox" name="acceptance" value="1" class="wpcf7-acceptance" />同意する</p>
<p><input type="image" src="btn_send_contact.jpg" alt="送信する" name='save' />
<input type="image" onClick="this.form.reset();return false" src="btn_reset_contact.jpg" alt="リセットする" name='reset' /></p>
</form>

-----------------------------------------------------------------

私自身javascriptに関してはあまり知識がなく、
手さぐりでこんな感じかな？と思っていろいろ試したり、調べてみましたが、
いい方法が思いつきませんでした。

詳しい方、ぜひご回答をお願いいたします。

回答No.1

yambejp · ベストアンサー

＞}else if(document.forms['name1'].acceptance.checked){

の行はmndFiledsに宣言されていないフィールドなのでforループのなかで
チェックしてもelseにひっかからないですね
forの外にもってくるかmndFiledsに入れるかのどちらか

<script>
var mndFileds=new Array('Company','Last Name','Email','Phone','LEADCF3','Description','acceptance');
var fldLangVal=new Array('会社名','お名前','メールアドレス','お電話番号','お問い合せ種別','お問い合せ内容','同意する');
function checkMandatery(f){
for(var i=0;i<mndFileds.length;i++){
var obj=f.elements[mndFileds[i]];
if(!obj) continue;
if(
((obj.type=="text" || obj.type=="textarea") && obj.value=="")||
(obj.type=='select-one' && obj.selectedIndex==0)
){
alert(fldLangVal[i] +' を入力してください。');
obj.focus();
return false;
}
if(obj.type=="checkbox" && !obj.checked){
alert(fldLangVal[i]+'にチェックをしてください。');
return false;
}
}
}
</script>

<form action='' name='name1' method='POST' onSubmit='return checkMandatery(this)' accept-charset='UTF-8'>
<p>会社名(必須):<input name='Company' type='text' size="30" maxlength='100'/></p>
<p>お名前(必須):<input name='Last Name' type='text' size="30" maxlength='80' /></p>
<p>メールアドレス(必須):<input name="Email"></p>
<p>お電話番号(必須):<input name='Phone' type='text' size="30" maxlength='30' /></p>
<p>Webサイト:<input name='Website' type='text' size="40" maxlength='120' value="http://" /></p>
<p>お問い合せ種別(必須):
<select name='LEADCF3'>
<option value='-None-'>?なし?</option>
<option value='種別1'>種別1</option>
<option value='種別2'>種別2</option>
<option value='種別3'>種別3</option>
</select></p>
<p>お問い合せ内容(必須):<textarea name='Description' cols="40" width='250' height='250'></textarea></p>
<p><input type="checkbox" name="acceptance" value="1" class="wpcf7-acceptance" />同意する</p>
<p><input type="image" src="btn_send_contact.jpg" alt="送信する" name='save' />
<input type="image" onClick="this.form.reset();return false" src="btn_reset_contact.jpg" alt="リセットする" name='reset' /></p>
</form>

お礼

ご回答、ありがとうございます！

なるほど…mndFileds内に宣言しないと動かないんですね。

とりあえず、増やせばいけるかな？？と思っていたので ^_^;

参考ソースもありがとうございます！
何とか動作することができました！