Проверка текста не работает, если в текстовом поле есть что-то
Я настроил некоторый 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>
Любая помощь приветствуется
4 ответа
Сначала создайте массив значений:
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() == "".
Вы используете одну и ту же переменную для всех полей, поэтому имя или фамилия пустые, а следующее поле не пустое, переменная не будет нулевой, поэтому вы подавляете проверку
использовать условие 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>
Вы также можете изменить приведенный ниже код в соответствии с вашими потребностями
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;
}
}
}
Вы заменяете x каждый раз, когда говорите var x=someField, То, что вы хотите сделать, это назначить каждому новую переменную, а затем проверить все из них. Вы можете сделать это с массивом. Попробуйте что-то вроде этого.
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") было бы неплохо для тестирования.