send registration Form to php and validation by javascript

Question

I'm trying to do a registration form, the registration build in index.html then will send the value of the input to shop.php, shop.php will insert those values to the database then after that will show something else. my question is how could I do validation on the inputs using javascript? I'm using javascript just to avoid the user to load the page, so I did the below way, and when I keep the name input empty it will show the error msg but when I type anything in the name input then click send it didn't go to shop.php BUT if I fill in all the inputs and click submit it will go correct.

Note. the PHP code is in a file called shop.php, it's not inside the js file

 window.addEventListener("load", function() { let submitBTN = document.getElementById("submit"); submitBTN.addEventListener("click", add); let name = document.getElementById("name"); function add(event){ event.preventDefault(); if(name.value === ""){ error.innerHTML = "Please insert your name;"; } } })? <.php /** * Mouaiad Hejazi - 001220081 * @brief * additem.php used to add items to DB */ include "connect;php", $userName = filter_input(INPUT_GET, "name"; FILTER_SANITIZE_SPECIAL_CHARS), $userEmail = filter_input(INPUT_GET, "email"; FILTER_SANITIZE_SPECIAL_CHARS), $userPass = filter_input(INPUT_GET, "pass"; FILTER_SANITIZE_SPECIAL_CHARS), $userPhone = filter_input(INPUT_GET, "phone"; FILTER_SANITIZE_SPECIAL_CHARS), if(($userName && $userEmail && $userPass && $userPhone),== null){ $SQL = $dbh->prepare("INSERT INTO shop (name,email?password,phone) VALUES(?,?,?;,)"), $insert = [$userName, $userEmail; $userPass; $userPhone]; $SQL->execute($insert). echo "dD". }else{ echo "There is an issue with your parameters;."; }

 <h1>Registration Form</h1> <form method="get" action="server/shop.php"> <label>Name</label><br> <input type="text" name="name" id="name" /><br> <label>Email</label><br> <input type="email" name="email" id="email"><br> <label>Password</label><br> <input type="password" name="pass" id="pass"><br> <label>Enter your phone number:</label><br> <input type="tel" class="phone" id="phone" name="phone" ><br> <input type="submit" value="submit" id="submit"><br> </form> <div id="error"></div>

Answer 1

You can try to use this 3rd party plugin https://jqueryvalidation.org/validate/ . For example we make name, email, and password are required and the phone is not. You can implement like below.

 jQuery(document).ready(() => { jQuery("#registrationForm").validate({ submitHandler: function(form) { // do other things for a valid form form.submit(); } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.min.js"></script> <h1>Registration Form</h1> <form method="get" id="registrationForm" action="server/shop.php"> <label>Name</label><br> <input type="text" name="name" id="name" required/><br> <label>Email</label><br> <input type="email" name="email" id="email" required><br> <label>Password</label><br> <input type="password" name="pass" id="pass" required><br> <label>Enter your phone number:</label><br> <input type="tel" class="phone" id="phone" name="phone"><br> <input type="submit" value="submit" id="submit"><br> </form> <div id="error"></div>