JavaScript表单验证仅取决于第一个元素

Question

我的java脚本工作，但唯一的问题是，当名字和姓氏正确时，它会自动忽略所有其他表单元素并提交表单。但如果名称元素不正确，则验证整个表单。如果名字和姓氏正确，如何让它继续验证？

HTML：

<form method="post" class="anform" onsubmit="return formCheck()">

<fieldset class="an2fieldset">
<legend class="an2legend">Your Personal Details</legend>

<p><label for="afname">Your First Name:</label></p>
<p><input type="text" size="40" name="afname" id="afname" placeholder="First 
Name" class="an2input"/></p>

<p><label for="alname">Your Last Name:</label></p>
<p><input type="text" size="40" name="alname" id="alname" placeholder="Last 
Name" class="an2input"/></p>

<p><label for="aemail">Your Email:</label></p>
<p><input type="text" name="aemail" size="40" id="aemail" 
placeholder="abcdefgh@gmail.com" class="an2input"/></p>

</fieldset>

<fieldset class="an2fieldset">
<legend class="an2legend">Your Address Detail</legend>

<p><label for="address">Street Adress:</label></p>
<p><input type="text" name="adress" size="40" id="address" 
class="an2input"/></p>

<p><label for="town">City/Town:</label></p>
<p><input type="text" name="acity" size="40" id="town" class="an2input"/>
</p>

<p><label for="state">State:</label></p>
<p class="select">
<select name="state" id="states">
<option value="">--State--</option>
<option value="johor">Johor</option>
<option value="kedah">Kedah</option>
<option value="Kelantan">Kelantan</option>
<option value="Melaka">Melaka</option>
<option value="negeri">Negeri</option>
<option value="Pahang">Pahang</option>
<option value="Perak">Perak</option>
<option value="perlis">Perlis</option>
<option value="penang">Penang</option>
<option value="sabah">Sabah</option>
<option value="sarawak">Sarawak</option>
<option value="selangor">Selangor</option>
<option value="terengganu">Terengganu</option>
<option value="kuala">Kuala Lumpur</option>
<option value="labuan">Labuan</option>
<option value="putrajaya">Putrajaya</option>
</select>
</p>

<p><label for="postcode">Postcode:</label></p>
<p><input type="text" size="5" name="apostcode" id="postcode" 
class="an2input"/></p>

</fieldset>

<fieldset class="an2fieldset">
<legend class="an2legend" id="ye">Your Enquiry</legend>

<p><label for="phone">Phone Number:</label></p>
<p><input type="text" name="phonenumber" size="40" id="phone" 
placeholder="1712345678" class="an2input"/></p>

<p><label for="product">Product:</label></p>
<p class="select">
<select name="product" id="product" >
<optgroup label="Apartment">
<option value="apartment1" id="apartment1" name="pro[]">Apartment 1</option>
<option value="apartment2" id="apartment2" name="pro[]">Apartment 2</option>
<option value="apartment3" id="apartment3" name="pro[]">Apartment 3</option>
<option value="apartment4" id="apartment4" name="pro[]">Apartment 4</option>
<option value="apartment5" id="apartment5" name="pro[]">Apartment 5</option>
</optgroup>
<optgroup label="House">
<option value="house1" id="house1" name="pro[]">House 1</option>
<option value="house2" id="house2" name="pro[]">House 2</option>
<option value="house3" id="house3" name="pro[]">House 3</option>
<option value="house4" id="house4" name="pro[]">House 4</option>
<option value="house5" id="house5" name="pro[]">House 5</option>
</optgroup>
<optgroup label="Room">
<option value="room1" id="room1" name="pro[]">Room 1</option>
<option value="room2" id="room2" name="pro[]">Room 2</option>
<option value="room3" id="room3" name="pro[]">Room 3</option>
<option value="room4" id="room4" name="pro[]">Room 4</option>
<option value="room5" id="room5" name="pro[]">Room 5</option>
</optgroup>
<optgroup label="Student Room">
<option value="sroom1" id="sroom1" name="pro[]">Student Room 1</option>
<option value="sroom2" id="sroom2" name="pro[]">Student Room 2</option>
<option value="sroom3" id="sroom3" name="pro[]">Student Room 3</option>
<option value="sroom4" id="sroom4" name="pro[]">Student Room 4</option>
<option value="sroom5" id="sroom5" name="pro[]">Student Room 5</option>
</optgroup>
</select>

</p>

<p><label for="duration">Rental Duration:</label></p>
<p><input type="text" id="duration" class="an2input"/></p>

<p><label for="comment">Comment:</label></p>
<textarea class="an2textarea" name="acomment" cols="40" rows="20" 
id="comment" ></textarea> 
</fieldset>

<p><input type="submit" value="Send Enquiry" id="an2submit" 
class="an2input"/></p>

</form>

爪哇：

var errormsg = "";
function formCheck()
{
var AllOK = false;

var nameOK = cname();
var emailOK = cemail();
var addOK = cadd();
var cityOK = ccity();
var statesOK = cstates();
var pcodeOK = cpcode();
var hpOK = chp();
var productOK = cproduct();
var durationOK = cduration();

if(nameOK && emailOk && addOK && cityOK && statesOK && pcodeOK && hpOK && 
productOK && durationOK)
{
    AllOk = true;
}

else
{
    alert(errormsg);
    errormsg = "";
    AllOK = false;
}

return AllOK;
} 

function cname()
{
var fname = document.getElementById("afname").value;
var lname = document.getElementById("alname").value;
var namepat = /^[a-zA-z ]*$/;


if(fname == "")
{
    errormsg = errormsg + "Your first name must not be empty\n";
    return false;
}

if(lname == "")
{
    errormsg = errormsg + "Your last name must not be empty\n";
    return false;
}

if(!fname.match(namepat))
{
    errormsg = errormsg + "Your name must only contain letters A-Z\n";
    return false;
}

if(!lname.match(namepat))
{
    errormsg = errormsg + "Your name must only contain letters A-Z\n";
    return false;
}

if(fname.length > 25)
{
    errormsg = errormsg + "Your Name is too long\n";
    return false;
}

if(lname.length > 25)
{
    errormsg = errormsg + "Your Name is too long\n";
    return false;
}

else
{
    return true;
}
}

function cemail()
{
var email = document.getElementById("aemail").value;
var emailpat =  /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;


if(email == "")
{
    errormsg = errormsg + "Please Enter your E-mail\n";
    return false;
}

if(!email.match(emailpat))
{
    errormsg = errormsg + "Please Enter a valid E-mail\n";
    return false;
}

else
{
    return true;
}   
}

function cadd()
{
var add = document.getElementById("address").value;

if(add == "")
{
    errormsg = errormsg + "Please Enter your Address\n";
    return false;
}

if(add.length > 40)
{
    errormsg = errormsg + "Your Address is too long\n";
    return false;
}

else
{
    return true;
}
}

function ccity()
{
var city = document.getElementById("town").value;

if(city == "")
{
    errormsg = errormsg + "Please Enter your City/Town\n";
    return false;
}

if(city.length > 20)
{
    errormsg = errormsg + "Your City/Town is too long\n";
    return false;
}

else
{
    return true;
}
}

function cstates()
{
var state = document.getElementById("states").value;

if(states.selectedIndex == 0)
{
    errormsg = errormsg + "Please Select your State\n";
    return false;
}

else
{
    return true;
}
}

function cpcode()
{   
var pcode = document.getElementById("postcode").value;

if(pcode == "")
{
    errormsg = errormsg + "Please Enter your Post Code\n";
    return false;
}

if(pcode.length != 5)
{
    errormsg = errormsg + "Please enetr a 5-digit Post Code\n";
    return false;
}

else
{
    return true;
}
}

function chp()
{
var hp = document.getElementById("phone").value;
var nopat = /^[0-9]+$/;


if(hp == "")
{
    errormsg = errormsg + "Please Enter your Phone Number\n";
    return false;
}

if(!hp.match(nopat))
{
    errormsg = errormsg + "Your Phone Number must only be numbers\n";
    return false;
}

if(hp.length > 10)
{
    errormsg = errormsg + "Please Enter a 10-digit Phone Number\n";
    return false;
}

else
{
    return true;
}   
}

function cproduct()
{
var product = document.getElementsByName("pro[]");

var i=0;
var error=false;
for (i=0;i<product.length;i++){
    if (product[i].selected==true){
        error=true;
    }
}
if (error == false){
    errormsg = errormsg+"You have to select a product\n";
}
return error;

}

function cduration()
{
var duration = document.getElementById("duration").value;
var nopat = /^[0-9]+$/;

if(duration == "" || duration.length < 1)
{
    errormsg = errormsg + "Please Enter a Duration\n";
    return false;
}

if(!duration.match(nopat))
{
    errormsg = errormsg + "Duration must only be in numbers\n";
    return false;
}

else
{
    return true;
}   
}

Answer 1

如果您输入了名字和姓氏，我会在控制台中看到此错误：

  

ReferenceError：未定义emailOk

我认为你打错了。

emailOk应为emailOK

更改此行： if(nameOK && emailOk && addOK && cityOK && statesOK && pcodeOK && hpOK &&

到这一行： if(nameOK && emailOK && addOK && cityOK && statesOK && pcodeOK && hpOK &&