yopisan
@yopisan (kota)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

バリデーションエラーのポップアップが連続して出る。

バリデーションエラーのポップアップが連続して出る。

phpで問い合わせフォームの作成でバリデーションのエラーのポップアップが連続出てきてしまうのでこれらをどうにかしたい
jsのバリデーションとphpのバリデーションは二つかけてもOK
だが、jsのポップアップがなぜ2回繰り返し出て来るのかがわからないのでご教授願います

問題のエラー
https://gyazo.com/291ad277bbe320b7f42d7c402b3e25fd

該当するソースコード

contact.php
  <?php include 'layouts/header.php'; ?>
    <?php  session_start() ?>
    <div class="form-wrapper">
      <div class="error">
        <h1>
          <?php 
            if(isset($_SESSION["texts"])){
            foreach($_SESSION["texts"] as $error){
              echo $error."<br>";
              }
            }?>
        </h1>
      </div>        
      <div class="form">
        <div class="form-title">
          <h1>お問い合わせ</h1>
        </div>
        <div class="form-main">
          <div class="back">  
            <h2>下記の項目をご記入の上送信ボタンを押してください</h2>
          </div>  
            <p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。<br>
               なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。<br>
            <span>*</span>は必須項目となります。</p>
            <form action="" method="POST">
              <div class="form-contents">
                <div class="form-content">
                  <h3>氏名<span>*</span></h3>
                  <input type="text" name="name" 
                    value="<?php 
                      if(!empty($_SESSION["name"])){
                        echo $_SESSION["name"];
                      }
                      ?>" placeholder="山田太郎" class="inputName">
                </div>
                <div class="form-content">
                  <h3>フリガナ<span>*</span></h3>
                  <input type="text" name="kana" 
                    value="<?php 
                      if(!empty($_SESSION["kana"])){
                        echo $_SESSION["kana"];
                      }
                      ?>" placeholder="ヤマダタロウ" class="inputKana">
                </div>
                <div class="form-content">
                  <h3>電話番号</h3>
                  <input type="text" name="phone" 
                  value="<?php 
                  if(!empty($_SESSION["phone"])){
                    echo $_SESSION["phone"];
                  }
                  ?>" placeholder="09012345678" class="inputPhone">
                </div>
                <div class="form-content">
                  <h3>メールアドレス<span>*</span></h3>
                  <input type="text" name="address"
                    value="<?php 
                    if(!empty($_SESSION["address"])){
                      echo $_SESSION["address"];
                    }
                    ?>" placeholder="test@test.co.jp" class="inputAddress">
                </div>
              </div>
              <div class="back">  
                <h2>お問い合わせ内容をご記入ください<span>*</span></h2>
              </div>  
              <textarea name="question" class="inputQuestion"><?php 
                if(!empty($_SESSION["question"])){
                  echo $_SESSION["question"];
                }?></textarea><br>
              <input type="submit" value="送    信" class="form-submit" formaction="validate.php" >
            </form>
          </div>
        </div>

    </div>
    <?php include 'layouts/footer.php'; ?>
    <script type="text/javascript" src="index.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>
</html>

validate.php

validate.php
<?php
session_start();
foreach($_POST as $key => $val){
    $_SESSION[$key] = $val;   
}

    $error = 0;
    $errorText = [];

    if(empty($_SESSION["name"])) {
        array_push($errorText,"名前を入力してください。");
        $error++;
    };


    if(mb_strlen($_SESSION["name"]) >10) {
        array_push($errorText,"名前は10文字以内で入力してください。");
        $error++;
    };

    if(empty($_SESSION["kana"])) {
        array_push($errorText,"フリガナを入力してください。");
        $error++;
    };
    
    if(mb_strlen($_SESSION["kana"]) > 10) {
        array_push($errorText,"フリガナは10文字以内で入力してください。");
        $error++;
    };
    
    if(is_numeric($_SESSION["phone"]) == false) {
        array_push($errorText,"電話番号は0~9の数字で入力してください。");
        $error++;
    };

    if(empty($_SESSION["address"])) {
        array_push($errorText,"メールアドレスを入力してください。");
        $error++;
    };
    
    if(!empty($_SESSION["address"]) && !preg_match("/.@./",$_SESSION["address"])) {
        array_push($errorText,"正しいメールアドレスを入力してください。");
        $error++;
    };

    if(empty($_SESSION["question"])) {
        array_push($errorText,"お問い合わせ内容を入力してください。");
        $error++;
    };

    if($error == 0 ){
        header("Location:confirm.php");
    } else {
        unset($_SESSION["texts"]);
        foreach($errorText as $text){
            $_SESSION["texts"][] = $text;
        }
        header("Location:contact.php");
    }
?>


該当するソースコード

index.js
window.addEventListener('DOMContentLoaded', function(){
  if (document.URL.match("/contact.php") || document.URL.match("/confirm.php") ||  document.URL.match("/complete.php")){
      $(".header-container").addClass('fixedBlack');
  }

  $(".form-submit").on("click",function(){
      $error = 0;
      $errorText = [];
  
      if($(".inputName").val() == "") {
          $errorText.push("名前を入力してください。");
          $error++;
      };
  
      if($(".inputName").val().length > 10) {
          $errorText.push("名前は10文字以内で入力してください。");
          $error++;
      };
  
      if($(".inputKana").val() == "") {
          $errorText.push("フリガナを入力してください。");
          $error++;
      };
      
        if($(".inputKana").val().length > 10) {
          $errorText.push("フリガナは10文字以内で入力してください。");
          $error++;
      };
      
      if(!$.isNumeric($(".inputPhone").val())) {
          $errorText.push("電話番号は0~9の数字で入力してください。");
          $error++;
      };
  
      if($(".inputAddress").val() == "") {
          $errorText.push("メールアドレスを入力してください。");
          $error++;
      };
      
      
      if(!$(".inputAddress").val() == "" && !$(".inputAddress").val().match(".@.")) {
          $errorText.push("正しいメールアドレスを入力してください。");
          $error++;
      };
  
      if($(".inputQuestion").val() == "") {
          $errorText.push("お問い合わせ内容を入力してください。");
          $error++;
      };
  
      if($error > 0){
          $errorLog = "";
          $.each($errorText,function(key,val){
              $errorLog = $errorLog +"\n"+val;
          });
          alert($errorLog);
      }
  });
});

自分で試したこと

資料
https://support.r-cms.jp/help/detail/id=903
https://www.sejuku.net/blog/29821

みてみたがもう一つ該当しそうなものは得られず…

0

1Answer

index.jsを二重にロードしてませんか?
header.phpもしくはfooter.phpも<script type="text/javascript" src="index.js"></script>を出力してるとかで

0Like

Comments

  1. @yopisan

    Questioner

    ありがとうございます。確認してみるとcontact.phpの中に二重ロードしていたやつ見つけました。一度コメントアウトして正常に動くか確かめてみたところポップアップの動作も1度の表示に変わったので無事いけました。ありがとうございます。

Your answer might help someone💌