以下のソースでわからないことがあるので質問させていただきました。
ご意見以外をすべて入力し、送信ボタンを押すと次の画面へ移動するようにしたいのですが
ミスなく入力完了すると移動し、一度でもミスをしてしまうと移動できません。
後、趣味の欄のチェックボックスにチェックを入れ、
他のところを未入力にし送信ボタンを押してからチェックを外し、再度送信ボタンを押すと
趣味のところにだけ未入力のエラーメッセージが出ません。
上記の二つのことに関してなぜできないのかを教えてはいただけないでしょうか?
お願いします
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新規登録</title>
<!--<link rel="stylesheet" type="text/css" href="formCheck.css">-->
<script type="text/javascript" src="js/formCheck.js" charset="utf-8"></script>
</head>
<body>
新規ユーザ登録
<form id="form1" name="form1" method="post" action="test.php">
<table width="200" border="1">
<tr>
<td nowrap>ユーザ名:</td>
<td nowrap><input type="text" name="fUserName" id="fUserName" class="uT"></td>
<td nowrap><div id="userName" class="msg"></div></td>
</tr>
<tr>
<td nowrap>パスワード:</td>
<td nowrap><input type="password" name="fPassWd1" id="fPassWd1" class="uT"></td>
<td nowrap><div id="passWd1" class="msg"></div></td>
</tr>
<tr>
<td nowrap>パスワード:</td>
<td nowrap><input type="password" name="fPassWd2" id="fPassWd2" class="uT">
(確認用) </td>
<td nowrap><div id="passWd2" class="msg"></div></td>
</tr>
<tr>
<td nowrap>メールアドレス:</td>
<td nowrap><input type="text" name="fEMail1" id="fEMail1" class="uT"></td>
<td nowrap><div id="eMail1" class="msg"></div></td>
</tr>
<tr>
<td nowrap>メールアドレス:</td>
<td nowrap><input type="text" name="fEMail2" id="fEMail2" class="uT">
(確認用)</td>
<td nowrap><div id="eMail2" class="msg"></div></td>
</tr>
<tr>
<td nowrap>生年月日: </td>
<td nowrap><select name="fBirthdayYear" id="fBirthdayYear" class="uT">
<option value="">年</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>年
<select name="fBirthdayMonth" id="fBirthdayMonth" class="uT">
<option value="">月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="fBirthdayDay" id="fBirthdayDay" class="uT">
<option value="">日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日 生れ</td>
<td nowrap><div id="birthday" class="msg"></div></td>
</tr>
<tr>
<td nowrap>性別: </td>
<td nowrap><input type="radio" name="fSex" id="fSex1" class="fSex uT" value="男">男
<input type="radio" name="fSex" id="fSex2" class="fSex uT" value="女">女</td>
<td nowrap><div id="sex" class="msg"></div></td>
</tr>
<tr>
<td nowrap>出身地:</td>
<td nowrap><select name="fHometown" id="fHometown" class="uT">
<option value="">出身地</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="京都府">京都府</option>
<option value="奈良県">奈良県</option>
<option value="滋賀県">滋賀県</option>
<option value="和歌山県">和歌山県</option>
</select></td>
<td nowrap><div id="hometown" class="msg"></div></td>
</tr>
<tr>
<td nowrap>趣味:</td>
<td nowrap>
<input type="checkbox" name="fHobby[]" id="fHobby1" class="fHobby uT">ドライブ
<input type="checkbox" name="fHobby[]" id="fHobby2" class="fHobby uT">魚釣り
<input type="checkbox" name="fHobby[]" id="fHobby3" class="fHobby uT">インターネット
<input type="checkbox" name="fHobby[]" id="fHobby4" class="fHobby uT">映画鑑賞
<input type="checkbox" name="fHobby[]" id="fHobby5" class="fHobby uT">グルメ</td>
<td nowrap><div id="hobby" class="msg"></div></td>
</tr>
<tr>
<td nowrap>ご意見:</td>
<td nowrap><textarea name="fOpinion" id="fOpinion" class="uT" cols="50" rows="5"></textarea></td>
<td nowrap><div id="opinion" class="msg"></div></td>
</tr>
<tr>
<td nowrap><input type="reset" name="res" id="res" value="キャンセル"></td>
<td nowrap class="btn"><input type="button" name="btn" id="btn" value="テスト用"></td>
<td nowrap><input type="submit" name="sub" id="sub" value="新規登録"></td>
</tr>
</table>
</form>
</body>
</html>
window.onload=function(){
var form1=document.getElementById("form1");
var fUserName=document.getElementById("fUserName");
var fPassWd1=document.getElementById("fPassWd1");
var rfPassWd2=document.getElementById("fPassWd2");
var fEMail1=document.getElementById("fEMail1");
var fEMail2=document.getElementById("fEMike2");
var fBirthdayYear=document.getElementsByName("fBirthdayYear");
var fBirthdayMonth=document.getElementsByName("fBirthdayMonth");
var fBirthdayDay=document.getElementsByName("fBirthdayDay");
var fSex=document.getElementsByName("fSex");
var fHometown=document.getElementsByName("fHometown");
var fHobby=document.getElementsByClassName("fHobby");
var uT=document.getElementsByClassName("uT");
var msg=document.getElementsByClassName("msg");
var errerMsg=["ユーザ名が入力されていません",
"パスワードが入力されていません",
"パスワードが一致しません",
"メールアドレスが入力されていません",
"メールアドレスが一致しません",
"生年月日が入力されていません",
"性別を選択してください",
"出身を入力してください",
"趣味を入力してください"];
var SexFlag=0;
var HomeFlag=0;
var HobbyFlag=0;
var Flag=0;
form1.onsubmit=function(e){
//e.preventDefault();
if(fUserName.value==""){//ユーザ名判定
msg[0].innerHTML=errerMsg[0];
}
else msg[0].innerHTML="";
if(form1.fPassWd1.value==""){//パスワード判定
msg[1].innerHTML=errerMsg[1];
}
else if(form1.fPassWd1.value!=form1.fPassWd2.value){
msg[1].innerHTML=errerMsg[2];
}
else msg[1].innerHTML="";
if(form1.fEMail1.value==""){//メルアド判定
msg[3].innerHTML=errerMsg[3];
}
else if(form1.fEMail1.value!=form1.fEMail2.value){
msg[3].innerHTML=errerMsg[4];
}
else msg[3].innerHTML="";
//生年月日
if(fBirthdayYear[0].selectedIndex==0 || fBirthdayMonth[0].selectedIndex==0 || fBirthdayDay[0].selectedIndex==0){
msg[5].innerHTML=errerMsg[5];
}
else msg[5].innerHTML="";
for(var i=0; i<fSex.length; i++){
if(fSex[i].checked==true){
SexFlag++;
}
}
if(SexFlag==0) msg[6].innerHTML=errerMsg[6];//男女選択
else msg[6].innerHTML="";
if(fHometown[0].selectedIndex==0)msg[7].innerHTML=errerMsg[7];
else msg[7].innerHTML="";
for(var i=0;i<fHobby.length; i++)
{
if(fHobby[i].checked==true){
HobbyFlag++;
}
}
if(HobbyFlag==0)
{
msg[8].innerHTML=errerMsg[8];
}
else
{
msg[8].innerHTML="";
}
for(var i=0;i<msg.length;i++)
{
if(msg[i].innerHTML!="")Flag++;
}
if(Flag!=0){
e.preventDefault();
}
}
}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。