Как отобразить сообщение об ошибке в форме при использовании 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>

// здесь код 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 не работает должным образом при попытке чтобы обновить sh страницу, которую мои разделы 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