Если какие-либо из проверок формы не совпадают, предполагается, что они добавлены к счетчику.В конце, если счетчик больше нуля, он должен возвращать false и не разрешать отправку формы.
Я написал код в скобках.Я попытался использовать размещенный сайт и предварительный просмотр в реальном времени для тестирования кода, оба из которых приводят к одной и той же проблеме.Я пытался превратить функцию в переменную.Я пробовал разные методы получения переменных из формы.Я попытался просто скопировать другое решение, которое я нашел для этого через Google.Кажется, что ничего не работает для того, чтобы проверка работала так, как задумано.
Я заранее извиняюсь за стену кода.
JavaScript:
function checkAll(){
var userNameVerification = "0-9a-zA-Z"; //must include upper and lowercase so that user may use caps
var phoneNumberVerification = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; //taken from w3resoucre for the setup of phone number verification
var checker = 0;
var userName = document.regForm.userName.value;
var password = document.regForm.passwordvalue;
var passwordVerify = document.regForm.passwordVerify.value;
var firstName = document.regForm.firstName.value;
var lastName = document.regForm.lastName.value;
var email = document.regForm.email.value;
var phoneNumber = document.regForm.phoneNumber.value;
var signUpNewsletter = document.regForm.phoneNumber.value;
//check if username is empty
if(userName == ""){
document.getElementById('errorUserName').innerHTML = "Username cannot be empty.";
checker++;
}
//make sure username uses proper characters
if(!userName.match(userNameVerification)){
document.getElementById('errorUserName').innerHTLM = "Enter only numbers and letters.";
checker++;
}
//check if password is empty or is shorter than 8 characters
if(password == "" || password.lenth < 8) {
document.getElementById('errorPassword').innerHTML = "Password should be at least 8 characters long.";
checker++;
}
//make sure confirmation of password is not shorter than 8 and is not empty
if(passwordVerify == "" || passwordVerify.lenth < 8) {
document.getElementById('errorPasswordVerify').innerHTML = "Confirmation Password should be at least 8 characters long.";
checker++;
}
//passwords match
if(password != passwordVerify){
document.getElementById('errorPasswordVerify').innerHTML = "Passwords do not match.";
checker++;
}
//check if first name is empty
if(firstName == ""){
document.getElementById('errorFirstName').innerHTML = "First name cannot be empty.";
checker++;
}
//check if last name is empty
if(lastName == ""){
document.getElementById('errorLastName').innerHTML = "Last Name cannot be empty.";
checker++;
}
//check if email is empty
if(email == ""){
document.getElementById('errorEmail').innerHTML = "Email cannot be empty.";
checker++;
}
//check that @ and . are present
if(email.indexOf("@",0) < 0 || email.indexOf(".",0) < 0){
document.getElementById('errorEmail').innerHTML = "Enter a valid email address.";
checker++;
}
//check if phone number is empty
if(phoneNumber == ""){
document.getElementById('errorPhoneNumber').innerHTML = "You must enter a phone number.";
checker++;
}
//make sure phone number is in proper format
if(!phoneNumber.match(phoneNumberVerification)){
document.getElementById('errorPhoneNumber').innerHTML = "Enter a valid phone number in (XXX)XXX-XXXX format.";
checker++;
}
//make sure one of the radio buttons are clicked
if((signUpNewsletter[0].checked == false) && (signUpNewsletter[1].checked == false)){
document.getElementById('errorSignUp').innerHTML = "Please select one of the options.";
checker++;
}
//see if checker is greater than 0; if so, return false
if(checker > 0){
return false;
}
}
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li><a href="index.html">Home</a>
</li>
<li><a href="invitation.html">Invitation</a>
</li>
<li><a href="volunteer.html">Volunteers</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="registration.html" class="active">Registration</a>
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form name="regForm" action="confirmation.php" method="POST">
<label for="userName">Username:</label>
<input type="text" name="userName" placeholder="Enter your Username" />
<span id="errorUserName"></span><br>
<label for="Password">Password:
</label>
<input type="password" name="password" placeholder="Enter your Password" />
<span id="errorPassword"></span><br>
<label for="passwordVerify">Verify your Password:
</label>
<input type="password" name="passwordVerify" placeholder="Enter in your Password again" />
<span id="errorPasswordVerify"></span><br>
<label for="firstName">First Name:
</label>
<input type="text" name="firstName" placeholder="Enter your First Name" />
<span id="errorFirstName"></span><br>
<label for="lastName">Last Name:
</label>
<input type="text" name="lastName" placeholder="Enter your Last Name" />
<span id="errorLastName"></span><br>
<label for="email">Email:
</label>
<input type="text" name="email" placeholder="Enter your Email Address" />
<span id="errorEmail"></span><br>
<label for="phoneNumber">Phone Number
</label>
<input type="text" name="lastName" placeholder="Enter your Phone Number" />
<span id="errorPhoneNumber"></span><br>
<label for="signUpNewsletter">Sign up for newsletter:
</label>
<input type="radio" name="signUpNewsletter" value="Yes" checked> Yes
<input type="radio" name="signUpNewsletter" value="No"> No
<span id="errorSignUp"></span><br>
<input type="submit" value="Next step" onsubmit="return checkAll();">
</form>
</section>
<footer>This events site is for IT3515 tasks.
</footer>
</body>
</html>
Я ожидаю, что форма не будет отправлена, когда информация не проверена (например, я пытаюсь отправить пустую форму, что не должно позволять мне это делать), но она фактически отправляетформа независимо от того, какая информация вставлена в форму.