將注冊表發送至 php 並由 javascript 驗證

Question

我正在嘗試做一個注冊表，索引中的注冊構建。html 然后將輸入的值發送到 shop.php，shop.php 之后將顯示其他內容到數據庫中。 我的問題是如何使用 javascript 對輸入進行驗證？ 我使用 javascript 只是為了避免用戶加載頁面，所以我做了以下方式，當我保持名稱輸入為空時，它會顯示錯誤消息但是當我在名稱輸入中輸入任何內容然后單擊發送它沒有't go 到 shop.php 但如果我填寫所有輸入並單擊提交它將正確 go。

筆記。 PHP 代碼位於名為 shop.php 的文件中，它不在 js 文件中

 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

您可以嘗試使用這個第 3 方插件https://jqueryvalidation.org/validate/ 。 比如我們寫名字，email，需要密碼，手機不需要。 您可以像下面這樣實現。

 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>