如何验证HTML表单？

Question

我有一个HTML表单和一个按钮，当用户点击时会检查表单是否被填充。对帐单地址的细节是使用从数据库中输入PHP

<button id="btnConfirm" type="submit" onclick="validate()"style="float: right" value="Confirm Payment" >Confirm Payment</button> 
<form id="au" name="paymentform" method="post" action="" > 
<fieldset class="billing"> 
<legend>Billing Details</legend> 
<br /> 
<label class="reglabel" for="fname">First Name:</label> 
<input id="fname" name="billingfname" required="" type="text" value="<?php echo $fname ?>" /><br /> 
<label class="reglabel" for="lname">Last Name:</label> 
<input id="lname" name="billinglname" required="" type="text" value="<?php echo $lname ?>" /><br /> 
<label class="reglabel" for="address">Address:</label> 
<input id="address" name="billingaddress" required="" type="text" value="<?php echo $address ?>" /><br /> 
<label class="reglabel" for="town">Town:</label> 
<input id="town" name="billingtown" required="" type="text" value="<?php echo $town ?>" /><br /> 
<label class="reglabel" for="postcode">Post Code:</label> 
<input id="postcode" name="billingpostcode" required="" type="text" value="<?php echo $postcode ?>" /><br /> 
<label class="reglabel" for="phone">Phone:</label> 
<input id="phone" name="billingphone" required="" type="text" value="<?php echo $phone ?>" /><br /> 
<label id="EmailLabel" class="reglabel" for="email">E-mail:</label> 
<input id="email" name="billingemail" required="" type="email" value="<?php echo $email ?>" /><br /> 
</fieldset> 
<fieldset class="shipping"> 
<legend>Shipping Details</legend> 
<br /> 
<input name="shippingsame" onclick="fillShipping(this.form)" type="checkbox">Check 
    this box if billing address and shipping address are the same <br /> 
<label class="reglabel" for="fname">First Name:</label> 
<input id="fname" name="shippingfname" placeholder="Required" required="" type="text" /><br /> 
<label class="reglabel" for="lname">Last Name:</label> 
<input id="lname" name="shippinglname" placeholder="Required" required="" type="text" /><br /> 
<label class="reglabel" for="address">Address:</label> 
<input id="address" name="shippingaddress" placeholder="Required" required="" type="text" /><br /> 
<label class="reglabel" for="town">Town:</label> 
<input id="town" name="shippingtown" placeholder="Required" required="" type="text" /><br /> 
<label class="reglabel" for="postcode">Post Code:</label> 
<input id="postcode" name="shippingpostcode" placeholder="Required" required="" type="text" /><br /> 
<label class="reglabel" for="phone">Phone:</label> 
<input id="phone" name="shippingphone" placeholder="Required" required="" type="text" /><br /> 
<label id="EmailLabel" class="reglabel" for="email">E-mail:</label> 
<input id="email" name="shippingemail" placeholder="Required" required="" type="email" /><br /> 
</fieldset> 
    </form> 

这是我试着去检查他场是否为空的代码，但它似乎没有工作。它警告未定义

function validate() 
{ 
var firstname = document.getElementsByName("shippingfname").value; 
if (firstname == "") 
{ 
    alert('empty'); 
} 
else 
{ 
    alert(firstname); 
} 
} 

Answer 1

document.getElementsByName返回一个数组，所以你应该试试这个功能：

function validate() 
{ 
var firstname = document.getElementsByName("shippingfname")[0].value; 
if (firstname == "") 
{ 
    alert('empty'); 
} 
else 
{ 
    alert(firstname); 
} 
} 

Answer 2

getElementsByName()返回一个数组。不是一个单独的元素。在你的例子中，你将要使用ID属性来访问单个元素。

<input name="shippingsame" id="shippingsame" onclick="fillShipping(this.form)" type="checkbox"> 

function validate() 
{ 
    var firstname = document.getElementByID("shippingfname").value; 
    if (firstname == "") 
    { 
     alert('empty'); 
    } 
    else 
    { 
     alert(firstname); 
    } 
} 

Answer 3

或者你可以很容易地使用jQuery验证插件。 ıt非常适合客户端验证http://docs.jquery.com/Plugins/validation