【发布时间】：2018-03-30 23:15:46
【问题描述】：
由于某种原因，这不起作用，它非常简单，我看到了一百万个这样的例子。这是基本验证，只是为了查看他们是否没有单击示例之一以不提交表单。我验证了名字、姓氏和电子邮件。我将使用此函数验证的文本区域。
****************************已编辑**************************** * ******************所以我添加了更多我的代码，这样你们就可以更好地看到这个问题。注意：脚本和其他地方的一些代码已被修改。我将添加一个 CODECHANGED 以便您知道这是一个故意的错误。此外，css 很大，而且大部分都是不必要的，我相信你可以猜到这里发生了什么。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title Undetermined</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/hammerFavicon.ico" type="image/gif">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" CODECHANGED >
<link rel="stylesheet" href = "css/custom/siteStyle.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" CODECHANGED ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" CODECHANGED "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" CODECHANGED ></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Header include -------------------------------------------------------------------------------------- -->
<?php include("includes/header.php"); ?>
<!-- Navigation include ---------------------------------------------------------------------------------- -->
<?php include("includes/navigation.php"); ?>
<!-- Main Content section -------------------------------------------------------------------------------- -->
<main role="main" class="container">
</div>
<div class="jumbotron">
<!-- Paragraph for text if needed ---------------------------------------------------------------- -->
<p class="lead">
<h2>Ask Us A Question</h2>
<br />
<!-- Question submission form ---------------------------------------------------------------- -->
<form id="myForm" action="" onsubmit="return validForm()">
<div class="form-group">
<div class="col">
<label for="fN">First Name</label>
<input type="text" onblur="validateName(fN)" class="form-control" placeholder="First Name" id="fN">
</div>
</div>
<!--Last Name -------------->
<div class="form-group">
<div class="col">
<label for="lN">Last Name</label>
<input type="text" onblur="validateName(lN)" class="form-control" placeholder="Last Name" id="lN">
</div>
</div>
<!-- Email -->
<div class="form-group">
<div class="col">
<label for="eMail">Email</label>
<input type="email" onblur="validateEmail(eMail)" class="form-control" placeholder="Email" id="eMail">
</div>
</div>
<br/>
<!--Question Topic----------------------------------------------------------------------->
<h5>Select Question Category</h5>
<div class="form-group form-control">
<select id="qCategory" required>
<option selected>Select Category</option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<br>
<br>
<!-- Question Details text field ------------------------------------------------------ -->
<h5>Enter your question:</h5>
<div class="form-group">
<textarea id="txtArea" class="form-control" rows = "6" cols = "65"></textarea>
</div>
<br>
</div>
<br />
<div class="form-group">
<div>
<h5 id="formError">Please fill in entire form</h5>
<button onclick="return validForm()" type="submit" class="button button-block" id="cTModal">Create Ticket</button>
</div>
</form>
</p>
</div>
</main>
<!-- Footer include -------------------------------------------------------------------------------------- -->
<?php include("includes/footer.php"); ?>
</body>
</html>
--------开始 JAVASCRIPT-------------------------
//Checks if user has pressed update without entering fields
function validateName(x){
var re = /[A-Za-z]$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
fN.value = "Please enter your first name";
lN.value = "Please enter your last name";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please use only characters";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validateEmail(x){
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (x.value == ""){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "Please fill in email";
return false;
} else {
if (!re.test(x.value)){
x.style.background = '#e35152';
x.style.color = 'white';
x.value = "You must enter a valid email";
return false;
} else {
x.style.background = 'white';
x.style.color = 'black';
return true;
}
}
}
function validForm(){
var eMail = document.getElementById('eMail').value;
var lastName = document.getElementById('fN').value;
var firstName = document.getElementById('lN').value;
var formError = document.getElementById('formError');
if(firstName == ''){
formError.style.display = 'block';
return false;
} else if (lastName == ''){
formError.style.display = 'block';
return false;
} else if (eMail == ''){
formError.style.display = 'block';
return false;
} else {
formError.hide();
return true;
}
}
【问题讨论】：
-
我不认为
var formError = document.getElementById('formError').value;是正确的，如果你想稍后再做formError.style.display = 'block';。也许你的意思是var formError = document.getElementById('formError'); -
你的代码中有一些拼写错误，你能提供一个有效的片段吗？
-
所以我尝试了 Scaramouche 的方法，但没有成功。
-
@AbdeslemCharif 我添加了更多代码，希望对您有所帮助
标签： javascript forms validation onsubmit