由于某些原因，这不起作用，它如此简单，我看到这个工作的一百万个例子。这是基本的验证，只是为了看看他们是否没有点击其中一个示例而不提交表单。我对第一个，姓氏和电子邮件进行了验证。我将使用此功能验证文本区域。
*********************** EDITED *********************** * ***************所以我添加了更多的代码，所以你们可以更好地看到问题。注意：脚本和其他位置的某些代码已被修改。我将添加一个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>
-------- BEGIN 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;
}
}
答案 0 :(得分：0)
我注意到的第一件事是你的formError变量是formError元素的值而不是元素本身。所以你对.style的调用会失败。