我设置了一些 JavaScript 来确保表单中的所有字段都已填写。在大多数情况下它都有效，空字段，错误消息。当文本区域中有内容时，我的问题就出现了，我的表单已提交，即使其他字段可能为空。这是到目前为止我的代码:
<!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>
任何帮助将不胜感激
最佳答案
首先创建值数组:
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() == ""。
关于javascript - 如果文本框中有内容，则文本验证不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20675212/