Form failing validation submits anyway
Question
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. 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. Any help is appreciated, thank you!
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
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
<?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 answers
solution1
-1 ACCPTED 2018-08-19 01:00:04
尝试更改这样的onsubmit方法
onsubmit="return validateForm()"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Form submits regardless of validation
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 Form Validation Still Submits Form on 'False'
Form submits even if javascript form validation fails
Javascript phone and number field wont validate correctly submits form anyway
Required fields not working as form submits before validation
Related Tags