使用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部分在某人没有输入他的电子邮件时显示

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

即使我没有输入任何信息，它也会自动显示。它甚至显示我的感谢

区段

<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