JavascriptのpreventDefault()について

以下のソースでわからないことがあるので質問させていただきました。
ご意見以外をすべて入力し、送信ボタンを押すと次の画面へ移動するようにしたいのですが
ミスなく入力完了すると移動し、一度でもミスをしてしまうと移動できません。
後、趣味の欄のチェックボックスにチェックを入れ、
他のところを未入力にし送信ボタンを押してからチェックを外し、再度送信ボタンを押すと
趣味のところにだけ未入力のエラーメッセージが出ません。
上記の二つのことに関してなぜできないのかを教えてはいただけないでしょうか？
お願いします

<!doctype html> <html> <head> <meta charset="utf-8"> <title>新規登録</title>  <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();

}
}
}

行動規範の内容に同意します

回答2件

ベストアンサー

onloadの時しか、初期化しておらず
2回目にsubmitしたときに、前回のフラグが残ってるせいだと思います。

lang
1window.onload=function(){
2・・・（略）・・・
3    var SexFlag=0;
4    var HomeFlag=0;
5    var HobbyFlag=0;
6    var Flag=0;
7    form1.onsubmit=function(e){

↓

lang
1window.onload=function(){
2・・・（略）・・・
3    form1.onsubmit=function(e){
4      var SexFlag=0;
5      var HomeFlag=0;
6      var HobbyFlag=0;
7      var Flag=0;

投稿2015/06/28 13:57

編集2015/06/28 13:59

退会済みユーザー

総合スコア0

フラグ変数を利用すると、コードの複雑さが簡単に上がってしまうので、極力少なく済ませるほうがよいかもしれません

処理をまとまりとして関数に分けるのは重要だと思います

フラグ変数を使わないパターンに書き換えてみました

JavaScript Form Validator - CODEPEN

(まだほかに、より良い書き方ができるとは思います)
何か参考になれば幸いです

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

JavascriptのpreventDefault()について

Links

関連した質問