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

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

ただいまの
回答率

90.61%

  • JavaScript

    15970questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavascriptのpreventDefault()について

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 598

shanso

score 7

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


<!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();
}
}
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

onloadの時しか、初期化しておらず
2回目にsubmitしたときに、前回のフラグが残ってるせいだと思います。
window.onload=function(){
・・・(略)・・・
    var SexFlag=0;
    var HomeFlag=0;
    var HobbyFlag=0;
    var Flag=0;
    form1.onsubmit=function(e){

window.onload=function(){
・・・(略)・・・
    form1.onsubmit=function(e){
      var SexFlag=0;
      var HomeFlag=0;
      var HobbyFlag=0;
      var Flag=0;

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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


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

JavaScript Form Validator - CODEPEN

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

## Links

JavaScript | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15970questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。