我设置了一些javascript以确保表单中的所有字段都已填充。在大多数情况下它工作，空字段，错误消息。我的问题出现在textarea中有内容，我的表单已提交，即使其他字段可能为空。这是我目前的代码：
<!doctype html>
<html>
<head>
<title>Employment</title>
<link href="../printstyles.css" rel="stylesheet" type="text/css" media="print" />
<link href="../morlanslayout.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function validateForm()
{
var x=document.forms["jobapp"]["firstname"].value;
var x=document.forms["jobapp"]["lastname"].value;
var x=document.forms["jobapp"]["address"].value;
var x=document.forms["jobapp"]["city"].value;
var x=document.forms["jobapp"]["planet"].value;
var x=document.forms["jobapp"]["system"].value;
var x=document.forms["jobapp"]["cluster"].value;
var x=document.forms["jobapp"]["phone"].value;
var x=document.forms["jobapp"]["email"].value;
var x=document.forms["jobapp"]["resume"].value;
if (x==null || x=="")
{
alert("All fields must be filled in");
return false;
}
}
</script>
</head>
<body class="container">
<div class="container">
<header>
<a href="#"><img src="../images/small-4128-598652.png" alt="Insert Logo Here" width="180" height="90" id="Insert_logo" /></a>
</header>
<div class="sidebar1">
<aside>
<a href="../morlansfamousshop.html" title="Homepage">Homepage</a><br />
<a href="../wares/morlansfamouswares.html" title="Wares">Wares</a><br />
<a href="../history/morlansfamoushistroy.html" title="Company History">Company History</a><br />
<a href="../support/morlansfamoussupport.html" title="Support">Support</a><br />
<a href="../employment/morlansfamousjobs.html" title="Employment">Employment</a><br />
<a href="../contact/morlansfamouscontactinfo.html" title="Contact Page">Contact Us</a><br />
</aside>
</div><!--end sidebar1-->
<article class="content">
<section>
<h1>Employment</h1>
<p>Are you interested in employment at Morlans Famous Shop?, if you answered yes, just fill out the following form and Morlan will check out your qualifications.</p>
</section>
<section>
<form name="jobapp" action="../support/thankyou.html" onsubmit="return validateForm()" method="post">
<fieldset>
<legend>Mailing Address</legend>
<label class="label" for="firstname">First Name:</label>
<input class="input" type="text" name="firstname" id="firstname" size="25" maxlength="25" />
<br />
<label class="label" for="lastname">Last Name:</label>
<input class="input" type="text" name="lastname" id="lastname" size="25" maxlength="25" />
<br />
<label class="label" for="address">Address:</label>
<input class="input" type="text" name="address" id="address" size="100" maxlength="100" />
<br />
<label class="label" for="city">City/Station:</label>
<input class="input" type="text" name="city" id="city" size="50" maxlength="50" />
<br />
<label class="label" for="planet">Planet:</label>
<input class="input" type="text" name="planet" id="planet" size="50" maxlength="50" />
<br />
<label class="label" for="system">System:</label>
<input class="input" type="text" name="system" id="system" size="50" maxlength="50" />
<br />
<label class="label" for="cluster">Cluster:</label>
<input class="input" type="text" name="cluster" id="cluster" size="50" maxlength="50" />
<br />
<label class="label" for="phone">Phone Number:</label>
<input class="input" type="text" name="phone" id="phone" size="50" maxlength="50" />
<br />
<label class="label" for="email">E-mail:</label>
<input class="input" type="email" name="email" id="email" maxlength="35" placeholder="name@cmail.com"/>
</fieldset>
<fieldset>
<legend>Job Applies To (check all that apply)</legend>
<input type="checkbox" name="job" id="shipping" value="shipping" checked="checked"/>
<label for="shipping">Shipping</label>
<br />
<input type="checkbox" name="job" id="cashier" value="cashier" />
<label for="cashier">Cashier</label>
<br />
<input type="checkbox" name="job" id="security" value="security" />
<label for="security">Security</label>
<br />
</fieldset>
<label for="resume">Paste Resume Here</label>
<br />
<textarea name="resume" id="resume" rows="10" cols="60" placeholder="Please enter your resume here."></textarea><!--end textareas on the same line that they start-->
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</section>
</article>
<footer>
<p>This is an <a href="http://www.luzerne.edu" title="LCCC website" target="_blank">LCCC</a> project for <a href="http://cis.luzerne.edu/~ds0002/cis146/index" title="My website for CIS 146" target="_blank">CIS146</a></a></p>
</footer>
</div><!--end container-->
</body>
</html>
任何帮助将不胜感激
答案 0 :(得分：1)
首先创建值数组：
var x = {};
现在获取表单的所有值并将其推送到x。
x.push(document.forms["jobapp"]["firstname"].value);
现在使用循环验证
for(i in x){
if(x[i] == null||x[i] ==""){
alert("whatever you want to alert");
return false;
}}
我还想告诉你，如果用户提供任何空间，x [i] ==“”将无效。所以使用x [i] .trim（）==“”。
答案 1 :(得分：1)
您对所有字段使用相同的变量，因此，如果firstname或lastname为空，而next字段不为空，则变量不为null，因此您正在抑制验证
在每个字段使用if条件而不是在循环结束时使用一次
如下所示
<script type="text/javascript">
function validateForm()
{
var x=document.forms["jobapp"]["firstname"].value;
if (x==null || x=="")
{
alert("firstname must be filled in");
return false;
}
x=document.forms["jobapp"]["lastname"].value;
if (x==null || x=="")
{
alert("lastname must be filled in");
return false;
}
......
......
}
</script>
答案 2 :(得分：0)
每次说var x=someField时，您都在替换x。你想要做的是将每个变量分配给一个新变量，然后检查所有变量。您可以使用数组执行此操作。尝试这样的事情。
function validateForm(){
var x = new Array();
x.push(document.forms["jobapp"]["lastname"].value);
x.push(document.forms["jobapp"]["address"].value);
x.push(document.forms["jobapp"]["city"].value);
x.push(document.forms["jobapp"]["planet"].value);
x.push(document.forms["jobapp"]["system"].value);
x.push(document.forms["jobapp"]["cluster"].value);
x.push(document.forms["jobapp"]["phone"].value);
x.push(document.forms["jobapp"]["email"].value);
x.push(document.forms["jobapp"]["resume"].value);
for(var i = 0; i < x.length; i++){
if (x[i]==null || x[i]==""){
alert("All fields must be filled in");
return false;
}
}
}
上面的代码会针对您留空的每个字段提醒一次，因此它不是最好的，但它可以解决您的问题。
如果字段为空，您可能需要设置bool，并在测试每个字段后设置警报：
var fieldIsEmpty = false;
for(var i = 0; i < x.length; i++){
if (x[i]==null || x[i]==""){
fieldIsEmpty = true;
}
}
if(fieldIsEmpty) {
alert("All fields must be filled in");
return false;
}
此外，警报可能会非常烦人。例如，如果您使用上面的第一个代码将每个字段留空。 console.log("All fields must be filled in")非常适合测试。
答案 3 :(得分：0)
您还可以修改以下代码以满足您的需求
function validateForm()
{
var allFormElements = Array.prototype.slice.call( document.getElementsByTagName('input') ).concat (Array.prototype.slice.call( document.getElementsByTagName('textarea') ) );
for (var i = 0; i < allFormElements.length; i++)
{
if (allFormElements[i].value == "")
{
alert("You must fill in all fields");
return false;
}
}
}