我的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.