[英]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.