表单验证失败仍然提交
[英]Form failing validation submits anyway
问题描述
So I am trying to re-learn web design as part of an app I am creating right now. 
因此，我正在尝试重新学习网页设计，并将其作为我现在正在创建的应用程序的一部分。 And for some reason when I click the submit button on my form, it is still submitting even though the validation fails. 由于某种原因，当我单击表单上的提交按钮时，即使验证失败，它仍在提交。 I can see the JavaScript prints the error message to the result label, but a second later it loads the PHP page anyways. 我可以看到JavaScript将错误消息打印到结果标签，但是一秒钟之后，它仍然会加载PHP页面。 I am unsure why this is happening. 我不确定为什么会这样。 Yes I know that in my JS file everything returns false, but that is to demonstrate that I can fail the validation and have it submit anyways which makes no sense. 是的，我知道在我的JS文件中所有内容都返回false，但这是为了证明我可能无法通过验证，并且无论如何都要提交验证，这毫无意义。 Any help is appreciated, thank you! 任何帮助表示赞赏，谢谢！
register.html register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/validate_registration.js"></script>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<title>Family Polaris</title>
</head>
<body>
<form name="registrationForm" action="register.php" onsubmit="validateForm()" method="post">
<table>
<tr>
<td colspan="3" class="title"><h1>Family Polaris</h1></td>
</tr>
<tr>
<td class="leftColumn"> </td>
<td class="centerColumn"><h2>Registration</h2></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn"> </td>
<td class="centerColumn">
<p>Thank you for taking the time to consider Family Polaris for your family needs!
<br>In order to get started all new users must register before they can login.
<br>Please fill out the registration form below, thank you!<br><br>
<span class="required">Fields marked with an asterisk (*) are required fields.</span><br><br></p>
</td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">First Name </td>
<td class="centerColumn"> <input type="text" name="firstName" id="firstName" maxlength="50" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">Last Name </td>
<td class="centerColumn"> <input type="text" name="lastName" id="lastName" maxlength="50" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">E-Mail </td>
<td class="centerColumn"> <input type="text" name="email" id="email" maxlength="50" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">Password </td>
<td class="centerColumn"> <input type="password" name="password" id="password" maxlength="20" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">Confirm Password </td>
<td class="centerColumn"> <input type="password" name="confirmPassword" id="confirmPassword" maxlength="20" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">4-digit Pin Code </td>
<td class="centerColumn"> <input type="password" name="pin" id="pin" pattern="[0-9]{4}" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn">Confirm Pin Code </td>
<td class="centerColumn"> <input type="password" name="confirmPin" id="confirmPin" pattern="[0-9]{4}" required /><span class="required"> *</span></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn"> </td>
<td class="centerColumn"><br> <input type="reset" onClick="printErr('')" /> <input type="submit" name="Submit" /></td>
<td class="rightColumn"> </td>
</tr>
<tr>
<td class="leftColumn"> </td>
<td class="centerColumn"><br><span id="result"></span></td>
<td class="rightColumn"> </td>
</tr>
</table>
</form>
</body>
</html>
validate_registration.js validate_registration.js
function validateForm() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
var pin = document.getElementById("pin").value;
var confirmPin = document.getElementById("confirmPin").value;
if(pass.length < 8) {
printErr("Error: Passwords must be between 8 and 20 characters in length.");
return false;
} else if(isNaN(pin)) {
printErr("Error: Pin code must be numeric characters only.");
return false;
} else if(pass != confirmPassword) {
printErr("Error: Passwords do not match.");
return false;
} else if(pin != confirmPin) {
printErr("Error: Pin codes do not match.");
return false;
} else {
printErr("");
// DO AJAX STUFF
return false;
}
return false;
}
function printErr(errMsg) {
var div = document.getElementById('result');
div.innerHTML = errMsg.toString();
}
register.php register.php
<?php
include "conn.php";
echo "<br>First Name: " . $_POST['firstName'];
echo "<br>Last Name: " . $_POST['lastName'];
echo "<br>E-Mail: " . $_POST['email'];
echo "<br>Password: " . $_POST['password'];
echo "<br>Pin: " . $_POST['pin'];
if(empty($_POST['firstName']) || empty($_POST['lastName']) || empty($_POST['email']) || empty($_POST['password']) || empty($_POST['pin']))
{
echo "<br>Error: Please fill out all required fields.";
} else if($_POST['password'] != $_POST['confirmPassword']) {
echo "<br>Error: Passwords do not match.";
} else if($_POST['pin'] != $_POST['confirmPin']) {
echo "<br>Error: Pin codes do not match.";
} else if(strlen($_POST['password']) > 20 || strlen($_POST['password']) < 8) {
echo "<br>Error: Passwords must be between 8 and 20 characters in length.";
} else if(strlen($_POST['pin']) != 4) {
echo "<br>Error: Pin codes must be a maximum of 4 characters.";
} else if(strlen($_POST['firstName']) > 50 && strlen($_POST['lastName']) > 50 && strlen($_POST['email']) > 50) {
echo "<br>Error: First Name, Last Name, and E-mail fields must be shorter than 50 characters in length.";
} else if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
echo "<br>Error: You must use a valid e-mail address.";
} else {
echo "<br><br>Successfully checked all data!";
/* NOT YET IMPLEMENTED -- IGNORE
$stmt = $conn->prepare("INSERT INTO family (username, password) VALUES (:username, :password)");
$stmt->bindParam(":username", $_POST['username']);
$stmt->bindParam(":password", $_POST['password']);
if($stmt->execute())
{
echo "Data added successfully";
} else {
echo "Failed to add data";
}*/
}
?>
1 个解决方案
解决方案1
-1 已采纳 2018-08-19 01:00:04
尝试更改这样的onsubmit方法
onsubmit="return validateForm()"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无论验证如何，表格都会提交 - Form submits regardless of validation
表单在验证之前在php中提交 - form submits before validation in php
表单验证失败但提交页面 - Form validation fails but submits page
表单即使验证失败也会提交 - Form submits even if validation fails
表单验证失败但仍然提交 - Form validation fails but still submits
表单即使存在验证错误也可以提交 - Form submits even with validation errors
JavaScript表单验证仍在“ False”上提交表单 - JavaScript Form Validation Still Submits Form on 'False'
即使javascript表单验证失败，表单也会提交 - Form submits even if javascript form validation fails
Javascript电话和号码字段仍然无法正确验证提交表单 - Javascript phone and number field wont validate correctly submits form anyway
必填字段在验证前无法作为表单提交 - Required fields not working as form submits before validation
相关标签