How can I display an error message in a form while using php and javascript

// What I am Trying to do is to use php and insert my subscribers of Websites In A database first here is

// my html code

  <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">  

   ★Thanks For Subscribing ★

// here is the php Code in 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');

}
?>

// This is the code to insert my user name and emails in my data base php admin

// here is my javascript that I use to validate my information

// 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"


}

}

// The reason why I am using php and javascript is because I have a hard time to display an error message

in php so instead of validating using php I use javascript to validate my form information and I use php

insert the data in php myadmin. The error messages I want to display is in

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

// I want to use javascript so that when some one does not enter his name this div section display under

the form

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

// the same thing above I want this div section to display when some one does not enter his email

//somehow my javascript does not work properly when i try to refresh the page my div sections display

automatically even though I did not enter any information it just displays. it even display my thank you

section

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

// I also want my php code to not insert the data in the database when the information is not valid