error発生時にalertを表示させたい（画面遷移をせずに）

Question

実現したいこと

error発生時にalertを表示させたい（画面遷移をせずに）

前提

お問合せフォームの画面でエラーになった時に画面遷移をしてalertが表示されます↓

画面遷移後↓

これを画面遷移をせずにalertを表示したいです！！！

該当のソースコード

     <?php
      
      
      if(isset($_SESSION['error']['name'])){
        echo '<script>alert("' . $_SESSION['error']['name'] . '");</script>';
       }?>
      </p>
      <input type="text" name="name" id="name" maxlength="10" value="<?php if(isset($_SESSION["name"])){echo $_SESSION["name"];} ?>" placeholder="山田太郎">

      <p>フリガナ<span>*</span></p>
      <?php
      if(isset($_SESSION['error']['huri'])){
        echo '<script>alert("' . $_SESSION['error']['huri'] . '");</script>';
        }?>
      </p>
      <input type="text" name="huri" id="huri" maxlength="10" value="<?php if(isset($_SESSION["huri"])){echo $_SESSION["huri"];} ?>" placeholder="ヤマダタロウ">


      <p>電話番号</p>
      <p>
      <?php
        if(isset($_SESSION['error']['suuzi'])){
          echo '<script>alert("' . $_SESSION['error']['suuzi'] . '");</script>';
      }?>
      </p>
      <input type="text" name="suuzi" id="suuzi" value="<?php if(isset($_SESSION["suuzi"])){echo $_SESSION["suuzi"];} ?>" placeholder="09012345678">

      <p>メールアドレス<span>*</span></p>
      <p>
      <?php
       if(isset($_SESSION['error']['mail'])){
        echo '<script>alert("' . $_SESSION['error']['mail'] . '");</script>';
       }?>
      </p>
      <input type="text" name="mail" id="mail"  value="<?php if(isset($_SESSION["mail"])){echo $_SESSION["mail"];} ?>" placeholder="[e-mail]">

      <p class="nr">お問い合わせ内容をご記入ください<span>*</span></p>
      <p>
      <?php
       if(isset($_SESSION['error']['box'])){
        echo '<script>alert("' . $_SESSION['error']['box'] . '");</script>';
       }?>
      </p>
      <textarea name="box" id="box" cols="300" rows="30"><?php if(isset($_SESSION["box"])){echo $_SESSION["box"];} ?></textarea>
      <button type="submit">送信</button>
    </form>
</div>

試したこと

if (isset($_POST['register'])) {
// 入力値の検証とエラーチェックを行う（省略）

if (エラーチェックに引っかかった場合) {
    $nameError = $_SESSION['error']['name'] ?? '';
    $huriError = $_SESSION['error']['huri'] ?? '';
    $suuziError = $_SESSION['error']['suuzi'] ?? '';
    $mailError = $_SESSION['error']['mail'] ?? '';
    $boxError = $_SESSION['error']['box'] ?? '';
}

}を追加したが今度はwebsiteが読み込めなくなった

Answer 1

PHPは基本的にページのロード時にしか動けないので、そういった処理は元のページのHTMLとJavaScriptでやります。

元のページの氏名の <input> に required 属性を付けるだけでいいかもしれません。

Comments

[退会済みユーザー]

ありがとうございます！やってみると「このフィールドを入力してください」という表示が出てきました。

下記のコードに書き換えるとお問合せboxが二つに表示されてしまったのですがこれはどうしたらいいのでしょうかTTアドバイスいただけると幸いです。（これ以外は画面遷移せずにalertが表示されるようになりました。

<p class="nr">お問い合わせ内容をご記入ください<span>*</span></p>
<?php
if(isset($_SESSION['error']['box'])){
echo '<textarea name="box" id="box" cols="300" rows="30">' . $_SESSION["box"] . '</textarea>';
echo '<script>';
echo 'setTimeout(function() {';
echo 'alert("' . $_SESSION['error']['box'] . '");';
echo '}, 0);';
echo '</script>';
} else {
echo '<textarea name="box" id="box" cols="300" rows="30">' . $_SESSION["box"] . '</textarea>';
}
?>

[退会済みユーザー]

こちらはalertも問題なく上に表示されている状態です。

Answer 2

画面を遷移しない想定であればUIはjsで作ってください

参考

<script>
document.addEventListener('invalid',e=>{
  if(e.target.matches('[data-invalid-message]')){
    alert(e.target.dataset.invalidMessage);
  }
},true);
</script>
<form>
氏名：<input type="input" name="name" data-invalid-message="氏名は必須入力です。10文字以内で入力ください" pattern=".{1,10}" required><br>
メール：<input type="input" name="mail" data-invalid-message="Eメールは必須入力です。" required><br>
<input type="submit" value="send">
</form>

Comments

[退会済みユーザー]

こちらで問題改善することができました。ありがとうございます！