如何驗證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