Form Validation example

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

The code below illustrates showing all the form validation error messages together as explained in the Form Validation : more features 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>
<div id='myform_errorloc' class='error_strings'>
                              </div>
</td>
</tr>
<tr>
    <td align="right"></td>
    <td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
  var frmvalidator  = new Validator("myform");

  frmvalidator.EnableMsgsTogether();
  frmvalidator.addValidation("FirstName","req",
  "Please enter your First Name");
  frmvalidator.addValidation("FirstName","maxlen=20",
  "Max length for FirstName is 20");
  frmvalidator.addValidation("FirstName","alpha",
  "Alphabetic chars only");
 
  frmvalidator.addValidation("LastName","req",
  "Please enter your Last Name");
  frmvalidator.addValidation("LastName","maxlen=20",
  "Max length is 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:
Form Validation : more features

  • 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.