「新規登録」「ログイン」機能を実装しております。
バリデーションチェックを行い、エラーとなる場合は画面遷移（モーダルが表示されたままの状態で）させずに、エラー分だけ表示させたいです。

試しに、以下の通りにinputタグに　onclick="false">を加えて、見たのですが登録ボタンを押下後にモーダルが消えてしまいます。
どのようにモーダルを制御するべきでしょうか。

(変更前） <input type="submit" id="submit-btn" value="登録">
(変更後）<input type="submit" id="submit-btn" value="登録" onclick="false">

index.php


<?php
error_reporting(E_ALL); //E_STRICTレベル以外のエラーを報告する
ini_set('display_errors','On'); //画面にエラーを表示させるか

//1.post送信されていた場合
if(!empty($_POST)){

  //エラーメッセージを定数に設定
  define('MSG01','入力必須です');
  define('MSG02', 'Emailの形式で入力してください');
  define('MSG03','パスワード（再入力）が合っていません');
  define('MSG04','半角英数字のみご利用いただけます');
  define('MSG05','6文字以上で入力してください');

  //配列$err_msgを用意
  $err_msg = array();

  //2.フォームが入力されていない場合
  if(empty($_POST['email'])){

    $err_msg['email'] = MSG01;

  }
  if(empty($_POST['pass'])){

    $err_msg['pass'] = MSG01;

  }
  if(empty($_POST['pass_retype'])){

    $err_msg['pass_retype'] = MSG01;

  }

  if(empty($err_msg)){

    //変数にユーザー情報を代入
    $email = $_POST['email'];
    $pass = $_POST['pass'];
    $pass_re = $_POST['pass_retype'];

    //3.emailの形式でない場合
    if(!preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $email)){
      $err_msg['email'] = MSG02;
    }

    //4.パスワードとパスワード再入力が合っていない場合
    if($pass !== $pass_re){
      $err_msg['pass'] = MSG03;
    }

    if(empty($err_msg)){

      //5.パスワードとパスワード再入力が半角英数字でない場合
      if(!preg_match("/^[a-zA-Z0-9]+$/", $pass)){
        $err_msg['pass'] = MSG04;

      }elseif(mb_strlen($pass) < 6){
      //6.パスワードとパスワード再入力が6文字以上でない場合

        $err_msg['pass'] = MSG05;
      }

      if(empty($err_msg)){

        //DBへの接続準備
        $dsn = 'mysql:dbname=php_sample01;host=localhost;charset=utf8';
        $user = 'root';
        $password = 'root';
        $options = array(
                // SQL実行失敗時に例外をスロー
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                // デフォルトフェッチモードを連想配列形式に設定
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                // バッファードクエリを使う(一度に結果セットをすべて取得し、サーバー負荷を軽減)
                // SELECTで得た結果に対してもrowCountメソッドを使えるようにする
                PDO::MYSQL_ATTR_USE_BUFFERED_QUERY => true,
            );

        // PDOオブジェクト生成（DBへ接続）
        $dbh = new PDO($dsn, $user, $password, $options);

        //SQL文（クエリー作成）
        $stmt = $dbh->prepare('INSERT INTO users (email,pass,login_time) VALUES (:email,:pass,:login_time)');

        //プレースホルダに値をセットし、SQL文を実行
        $stmt->execute(array(':email' => $email, ':pass' => $pass, ':login_time' => date('Y-m-d H:i:s')));

        header("Location:mypage.php"); //mypage画面へ
      }

    }
  }
}

?>


<!DOCTYPE html>
<html lang="ja">
 <head>
    <meta charaset="UTF-8">
    <title>MeeTech</title>
    <link rel="stylesheet" href="http://localhost:8888/sample/stylesheet.css"　>　
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://localhost:8888/sample/index.php/jquery.js"></script>
 </head>

  <body>
    <div class="header">
      <div class="header-logo">
        <h1 id="top-btn"><i class="fas fa-robot"></i>MeeTech</h1>
      </div>

      <div class="header-list">
        <ul>
          <li><div class="header-menu" id="about-btn"><a href="#about">ABOUT</a></div></li>
          <li><div class="header-menu" id="merit-btn"><a href="#merit">MERIT</a></div></li>
          <li><div class="header-menu" id="price-btn"><a href="#price">PRICE</a></div></li>
          <li><div class="header-menu" id="faq-btn"><a href="#faq">FAQ</a></div></li>
          <li><div class="header-menu" id="contact-btn"><a href="#contact">CONTACT</a></div></li>
        </ul>
      </div>

   </div>

  <div class="register-modal-wrapper" id="register-modal">
   <div class="modal">

      <div class="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>

      <div id="register-form">
        <h2>新規登録</h2>
        <form method="post">
          <span class="err_msg"><?php if(!empty($err_msg['email'])) echo $err_msg['email']; ?></span><br/>
          <input class="form-control" name="email" type="text" placeholder="メールアドレス"　value="<?php if(!empty($_POST['email'])) echo $_POST['email'];?>"><br/>

          <span class="err_msg"><?php if(!empty($err_msg['pass'])) echo $err_msg['pass']; ?></span><br/>
          <input class="form-control" name="pass" type="password" placeholder="パスワード" value="<?php if(!empty($_POST['pass'])) echo $_POST['pass'];?>"><br/>

          <span class="err_msg"><?php if(!empty($err_msg['pass_retype'])) echo $err_msg['pass_retype']; ?></span><br/>
          <input class="form-control" name="pass_retype" type="password" placeholder="パスワード(再)" value="<?php if(!empty($_POST['pass_retype'])) echo $_POST['pass_retype'];?>"><br/>

          <input type="submit" id="submit-btn" value="登録">
        </form>
      </div>
    </div>
  </div>

 <div class="login-modal-wrapper" id="login-modal">
   <div class="modal">

     <div class="close-modal">
       <i class="fa fa-2x fa-times"></i>
     </div>

      <div id="login-form">
        <h2>ログイン</h2>
        <form action="#" ethod="post">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <input type="submit" id="submit-btn" value="ログイン" onclick="return check()">
        </form>
      </div>
    </div>
  </div>


...以下省略

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

回答1件

ベストアンサー

原因理由

SUBMITはform actionに指定されたURLに送信するものです（未指定の場合は実行している自身）。
つまり送信先のプログラムは送信されたリクエストを以て再ロードされます。
再ロードされるので当然ながら「画面上のクリック」で動作するモーダルは初めの状態、
つまり上がってきていない状態のままになります。

onclickにfalseを指定したところでsubmitのイベントが止められるわけではありませんし、
そもそも送信されないのでPHPは実行されません。

対策

ボタンのクリックイベントにてEvent.preventDefault()
で送信無効にし
Ajaxを使ってチェックを行ってください。

Ajaxを使うので当然ながらPHPによるリダイレクトはできません。
チェック結果を以てSUBMIT実行するのもあまりよくありませんので、
Ajax内でチェックし、エラーあればエラーだけ返し、エラーなければ本来の処理を行い「OK」だけ返して
その結果次第で、エラーをJavaScriptでモーダル内に表示するか、JavaScriptでリダイレクトするかを切り分けてください。

投稿2019/08/25 05:48

編集2019/08/26 00:18