如何在使用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中，我使用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部分

//当我尝试刷新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>

​

网上有很多教程可以解释这一点。

您还可以获得有关MDN -> https://developer.mozilla.org的准确信息。