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

1 answer

// 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">      </form> </center>  <div class="sub-pop">   <center>     <h1 class="title-5">       &#9733;Thanks For Subscribing &#9733;     </h1>   </center> </div> <script src="home.js"></script> 

// here is the php Code in members.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

All answers to this question, which has the identifier 61220182

The best answer:

you unnecessarily complicate the task, html5 natively offers this kind of control, without having to add any line of additional code unless you want to customize them.

Just add the required attribute on these fields

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>

there is many tutorials on the web to explain this.
You also get precise information on MDN -> https://developer.mozilla.org

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data