[英]JavaScript Form Validation Not Returning False
如果任何表单验证不匹配，则应该向计数器添加一个。 最后，如果计数器大于零，则应该返回false并且不允许表单提交。
我已经在Brackets中编写了代码。 我已经尝试使用托管网站和实时预览来测试代码，这两者都会导致同样的问题。 我已经尝试将函数转换为变量。 我尝试过从表单中获取变量的不同方法。 我试过简单地通过谷歌复制我发现的另一种解决方案。 似乎没有什么能够使验证按预期工作。
我提前为代码墙道歉。
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>
我希望在未验证信息时不提交表单（例如，我尝试提交一个空表单，它不允许我这样做），但它实际上提交表单，无论在表单中插入什么信息。
添加你的onsubmit调用表单而不是按钮，它的工作原理。 不知道你的逻辑，但它的工作原理。 运行此代码！
function checkAll(){ var condition = false; if(condition){ alert ('All ok'); return true; } alert('Something wrong'); return false; }
<section id="pageForm"> <form name="regForm" action="confirmation.php" method="POST" onsubmit="return checkAll();"> <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" > </form> </section>
Javascript表单验证返回false，但表单仍然提交
[英]Javascript form validation returning false, but the form still submits
尽管javascript验证返回false并显示警报消息，但表单仍提交
[英]Form submits despite of javascript validation returning false and displaying alert message
即使JavaScript验证返回false，JSP表单仍会提交
[英]JSP form still submitting even though JavaScript validation returning false
Javascript onsubmit不返回任何值，如true或false。 表单可以提交而无需验证
[英]Javascript onsubmit is not returning any value like true or false. Form can submit without validation
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.