使用 php 和 javascript 时如何在表单中显示错误消息答案

【问题标题】：How can I display an error message in a form while using php and javascript使用 php 和 javascript 时如何在表单中显示错误消息
【发布时间】：2020-07-27 22:02:16
【问题描述】：

//我要做的是使用php并将我的网站订阅者插入A数据库首先是

//我的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 部分显示

//当我尝试刷新我的 div 部分显示的页面时，我的 javascript 无法正常工作

自动，即使我没有输入它只是显示的任何信息。它甚至表达了我的感谢

部分

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

//我也希望我的php代码在信息无效时不要将数据插入数据库中

【问题讨论】：

为什么电子邮件必须是密码，长度最少为 7 个字符？
对不起，我不小心输入了，没有必要我只是希望它显示某人没有写电子邮件的消息

标签： javascript php forms validation if-statement

【解决方案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

【讨论】：