使用 php 和 javascript 時如何在表單中顯示錯誤消息

Question

// 我想做的是使用 php 並首先將我的網站訂閱者插入數據庫中，這里是

// 我的 html 代碼

<center>
  <form action="members.php" method="post">
    <h1 class="title-4">Subscribe For Our Latest Updates</h1>

    <input type="text" name="name" id="name" placeholder="Enter Your Full Name">

    <div class="error-name" style="display:none">
      <p>Please Enter Your Name </p>
    </div>

    <input type="email" name="email" id="email" placeholder="Enter Your E-mail" >

    <div class="error-email" style="display:none">
      <p>Please Enter a Password Password must be greater than 7 characters  </p>
    </div>

   <input type="submit" name="submit" id="sub" class="name-sub email-sub" value="Subscribe">  

  </form>
</center>

<div class="sub-pop">
  <center>
    <h1 class="title-5">
      &#9733;Thanks For Subscribing &#9733;
    </h1>
  </center>
</div>
<script src="home.js"></script>

// 這是 members.php 中的 php 代碼

if(isset($_POST['submit'])) {

  $connection=mysqli_connect('localhost','root','','lolovers');

  $name  = $_POST['name'];
  $email = $_POST['email'];

  $query = "INSERT INTO subscribers(name,email)";
  $query .= "VALUES ('$name','$email')";

  $subscribe=mysqli_query($connection,$query);

  header('Location:home.php');
}

// 這是在我的數據庫 php admin 中插入我的用戶名和電子郵件的代碼

// 這是我用來驗證信息的 javascript

    // Pop up form for subscribers javascript code
const popUp      = document.querySelector('.title-5');
const name       = document.querySelector('#name');
const email      = document.querySelector('#email');
const subscribe  = document.querySelector('#sub');
const errorName  = document.querySelector('.error-name')
const errorEmail = document.querySelector('.error-email')

subscribe.addEventListener('click',subscription());

function subscription(e) {

  if(name.value==="") {
    errorName.style.display = "block"
  }
  else if (email.value==="") {
    errorEmail.style.display = "block"
  }
  else if (name.value && email.value==="") {
    errorName.style.display  = "block"
    errorEmail.style.display = "block"
    e.preventDefault()
  }
  else {
    popUp.style.display="block"
  }
}

// 我之所以使用 php 和 javascript 是因為我很難顯示錯誤信息

在 php 中，所以我沒有使用 php 進行驗證，而是使用 javascript 來驗證我的表單信息，我使用 php

在 php myadmin 中插入數據。 我要顯示的錯誤消息在

<div class="error-name" style="display:none">
    <p>Please Enter Your Name </p>
  </div>

// 我想使用 javascript 這樣當有人不輸入他的名字時這個 div 部分顯示在下面

表格

 <div class="error-email" style="display:none">
    <p>Please Enter a Password Password must be greater than 7 characters  </p>
</div>

// 和上面一樣 我希望這個 div 部分在有人不輸入他的 email 時顯示

//當我嘗試刷新我的 div 部分顯示的頁面時，我的 javascript 無法正常工作

即使我沒有輸入任何信息，它也會自動顯示。 它甚至顯示我的感謝

部分

<div class="sub-pop">
   <center><h1 class="title-5">
   &#9733;Thanks For Subscribing &#9733;
   </h1></center>
</div>

// 我還希望我的 php 代碼在信息無效時不向數據庫中插入數據

Answer 1

您不必要地使任務復雜化，html5 本身就提供了這種控件，除非您想自定義它們，否則無需添加任何額外的代碼行。

只需在這些字段上添加required的屬性

 form { display: table; margin: 1em auto; /* horizontal centering */ padding: .7em; border: 1px solid grey; } input, button { display: block; margin:.5em; float: left; clear: both; }

 <form action="members.php" method="post"> <h4>Subscribe For Our Latest Updates</h4> <input type="text" name="name" placeholder="Enter Your Full Name" required > <input type="email" name="email" placeholder="Enter Your E-mail" required > <button type="submit">Subscribe</button> </form>

web上有很多教程來解釋這個。
您還可以獲得有關 MDN 的精確信息 -> https://developer.mozilla.org