Simple Javascript Form Validator

Posted at August 21, 2009

JavaScript can be used to validate data in HTML forms before sending off the content to a server.

Form data that typically are checked by a JavaScript could be:

Initial and  most simple approach for the javascript form validation is by checking each fields in the form with their required values and generating alert box . To code for the large forms will be tedious and complexity also increases subsequently. So I thought to make a simple and general javascript form validator without the use of any javascript frameworks and images so that it can deployed easily.

How it Works:

If any field is found empty , or if email is not valid etc. then it displays the respective message next to the  form elements where the validation is required.

How to Use:

First download the formValidator.js from the link below.
Include the js file before the head tag.

<script src='form_validator_compressed.js'><script>

Just give id of the form as ‘myForm‘

if the form elements value should not be empty then give class as ‘required’ for that particular field.

class = 'required'

if value should be valid email:

class='validate'

if value should be number:

class='number'

if the browsed file should be image:

class='image'

if  passwords of  two password field need to be same:

class='confirm'

to both of the password fields

Drawbacks:

It doesnot  work on the radio button.

if other additional function is required that is related to the that particular form where this validator is used, it can give problem since the code runs on winow.onload event.

If there is any bugs with the validtor  or if any additional function is required or any queries is regarding the form validator then please feel free to email me on prabeen.giri@gmail.com
Demo
Download Link:formValidator.js

339 views
Javascript

Comments

6 Responses to “Simple Javascript Form Validator”

Leave Comment

(required)

(required)