我的JavaScript驗證表單不起作用
[英]My JavaScript validation form is not working
問題描述
我的驗證表不起作用，我也不知道為什么。 我試圖解決錯誤已有幾個小時，但無濟於事。
我似乎無法制作JavaScript代碼來驗證電子郵件格式，盡管電子郵件驗證部分的代碼似乎是正確的（或者不是嗎？）
而且我似乎也無法阻止按鈕進入無效鏈接。
每當我添加電子郵件驗證JavaScript代碼時，整個腳本都將被忽略，僅處理該特定部分
下面是我的代碼
HTML
<!DOCTYPE html>
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<title>FORM VALIDATION</title>
</head>
<body>
<div id="wrapper">
<div class="welcome">
<p>Welcome to the Ramones fan page!</p>
<p id="details">Please fill in your contact details below</p>
</div><!--welcome ends here-->
<div class="contianer">
<form id="form" method="POST" action="index.php" onsubmit="return validate()" name="vForm">
<div>
<h5>Name</h5>
<input type="text" name="username" class="textInput" placeholder="Username">
<div id="username_error" class="val_error"></div>
</div><!--Name ends here-->
<div>
<h5>Email</h5>
<input type="email" name="email" class="inputText" placeholder="Email">
<div id="email_error" class="val_error"></div>
</div><!--email ends here-->
<div>
<h5>Confirm Email</h5>
<input type="email" name="confirm_email" class="inputText" placeholder="Email">
<div id="confirm_email_error" class="val_error"></div>
</div><!--email ends here-->
<div>
<h5>Phone</h5>
<input type="text" name="phone" class="textInput" placeholder="Phone number">
<div id="phone_error" class="val_error"></div>
</div><!--phone ends here-->
<div>
<h5>Address</h5>
<input type="text" name="address" class="textInput" placeholder="Address">
<div id="address_error" class="val_error"></div>
</div><!--address ends here-->
<div>
<button type="submit" id="submit-btn" class="btn">Register</button>
</div><!--submit button ends here-->
</form><!--form ends here-->
</div>
</div><!--wrapper ends here-->
</body>
</html>
JavaScript的
// JavaScript Document
// text-fields//
//Execute JS after the page has loaded
window.onload = function(){
//Get the submit button and add an event listener when the user submits the form
document.getElementById("submit-btn").addEventListener("click", function(event){
event.preventDefault();
checkFields();
});
//Function that checks all fields on page
function checkFields(){
//Select fields by type
var inputs = document.getElementsByTagName('input');
//Add flag to check if email validates
var hasErrors = false;
//Reset all errors
resetErrors();
//Loop through all input fields and make sure they are not empty
for(var i = 0; i < inputs.length; i++) {
if (inputs[i].value === '') {
document.getElementById(inputs[i].name+'_error').innerHTML= "Please enter " + inputs[i].placeholder;
document.getElementById(inputs[i].name+'_error').style.display = "block";
hasErrors = true;
}
}
//If no errors check if email is confirmed correctly
if (!hasErrors) {
var emailValue = document.getElementsByName("email")[0].value;
var confirmEmailValue = document.getElementsByName("confirm_email")[0].value;
//if emails are not equal//
if (emailValue !== confirmEmailValue) {
document.getElementById('confirm_email_error').innerHTML= "Emails need to be identical";
document.getElementById('confirm_email_error').style.display = "block";
} else {
//Reset all errors
resetErrors();
alert('Your form has been submited successfully');
}
}
}
function resetErrors(){
//Select all errors and reset
var errors = document.getElementsByClassName("val_error");
for(var i = 0; i < errors.length; i++) {
errors[i].style.display = "none";
errors[i].innerHTML = "";
}
}
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.write ("Thank you, Email Address Valid"); <--------------
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}
CSS
/* CSS Document */
html{
background-image:url(ramoness.jpg);
background-repeat:repeat;
background-size:cover;
font-family: 'Indie Flower', cursive;
font-size:80px;
color:#FFF;
height: 100%;
}
.welcome{
margin-top:-5%;
margin-left:10%;
font-weight:bold;
}
#details{
font-size:50px;
margin-left:14%;
margin-top:-5%;
}
#form{
font-size:20px;
}
h5
{
margin-bottom: 15px;
}
.val_error
{
display: none;
width: 200px;
margin: 0 auto;
padding: 15px;
color: #FFF;
background-color: red;
font-size: 14px;
}
input
{
border: none;
border-radius: 5px;
padding: 15px 5px;
width: 200px;
margin-bottom: 10px;
}
.contianer
{
width: 400px;
margin: 0 auto;
text-align: center;
}
#submit-btn
{
text-align: center;
margin: 0;
border: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
white-space: normal;
background: none;
line-height: 1;
font-size: 13px;
background-color: #FFF;
outline: none;
width: 200px;
padding: 10px;
margin-top: 20px;
}
2 個解決方案
解決方案1
0 2017-03-03 13:03:18
這里的主要問題是您要在mailformat變量之前關閉 resetErrors函數。 這就是為什么您的部分代碼沒有執行的原因。
進行更改后，您還需要定義一個正在使用但未在任何地方定義/聲明的變量inputText 。
解決方案2
0 已采納 2017-03-03 13:05:38
您必須使用test()而不是match() 。 這是您幾乎相同的示例： 代碼筆鏈接 。
我的表單上的Javascript驗證無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.