JavaScript Form Validation example

This is sample code that uses the JavaScript Form Validation script in this page.

The code:

<form action="" name="myform" >
<table cellspacing="2" cellpadding="2" border="0">
<tr>
  <td align="right">First Name</td>
  <td><input type="text" name="FirstName"></td>
</tr>
<tr>
  <td align="right">Last Name</td>
  <td><input type="text" name="LastName"></td>
</tr>
<tr>
  <td align="right">EMail</td>
  <td><input type="text" name="Email"></td>
</tr>
<tr>
  <td align="right">Phone</td>
  <td><input type="text" name="Phone"></td>
</tr>
<tr>
  <td align="right">Address</td>
  <td><textarea cols="20" rows="5" name="Address"></textarea></td>
</tr>
<tr>
  <td align="right">Country</td>
  <td>
  <SELECT name="Country">
    <option value="" selected>[choose yours]
    <option value="008">Albania
    <option value="012">Algeria
    <option value="016">American Samoa
    <option value="020">Andorra
    <option value="024">Angola
    <option value="660">Anguilla
    <option value="010">Antarctica
    <option value="028">Antigua And Barbuda
    <option value="032">Argentina
    <option value="051">Armenia
    <option value="533">Aruba
 </SELECT>
</td>
</tr>
<tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
 var frmvalidator = new Validator("myform");
 frmvalidator.addValidation("FirstName","req","Please enter your First Name");
 frmvalidator.addValidation("FirstName","maxlen=20",
"Max length for FirstName is 20");
 frmvalidator.addValidation("FirstName","alpha");
 
 frmvalidator.addValidation("LastName","req");
 frmvalidator.addValidation("LastName","maxlen=20");
 
 frmvalidator.addValidation("Email","maxlen=50");
 frmvalidator.addValidation("Email","req");
 frmvalidator.addValidation("Email","email");
 
 frmvalidator.addValidation("Phone","maxlen=50");
 frmvalidator.addValidation("Phone","numeric");
 
 frmvalidator.addValidation("Address","maxlen=50");
 frmvalidator.addValidation("Country","dontselect=0");

</script>

The form created by the code:

First Name
Last Name
EMail
Phone
Address
Country

Back to article:
JavaScript Form Validation: Quick and Easy

  • Digg
  • del.icio.us
  • Netscape
  • Reddit
  • StumbleUpon
  • Technorati
  • YahooMyWeb

How to make a form without coding? Click here for a demo.

Follow me on twitter

HTML Forms
HTML Form Tutorial
The Form Tag
The Form Submit Button
Form design software
How to make a web form
Make web forms quickly, without coding

Javascript Form Handling
  Basics
Using getElementById to get the elements in a form
Set value of form element using JavaScript
Get value of form element using JavaScript
Handling multiple forms using JavaScript
JavaScript reset/clear a form
  Advanced
JavaScript Form Validation
Submitting a form using JavaScript
Can JavaScript Email a Form?
Switching the form action field dynamically
JavaScript Button

JavaScript Popup Windows
The window.open method
The window.close method
More ...

 
.   Copyright © 2003-2009 JavaScript-coder.com. All rights reserved.