Most of WEB developer has a form in their WEBsites. When you submit a form it sends some data to server and return result to you. Sometimes we need to get valid data for example email address. For that we can write a control function with dynamic language like PHP or asp. But at this time to validate form data we always need to send data to server and get results. It increase the server-client traffic. To reduce this traffic we can use JavaScript to validate for during submission.  But don’t forget that this does not provide security and any user can by-pass your JavaScript controllers and send any data they want to your server. Thus you need a second  input controller  in server side if it is required.

Lets see how to develop form validation script.

At first wee need to run JavaScript function at submitting form thus we need to add such code inside form tag.

<form action="index.PHP" method="post" onSubmit = "return ourFormValidator(this)">

As you see we need to use our JavaScript function with this which defines our form and we need to return function result because at this time, if our function return false, form wont be submitted else it will.

Then for example this is login form and we request users email address and password. Email should be valid email address and password should be not empty.

<input type="text" name="email">

<input type="password" name="password">

After that lets write our JavaScript ourFormValidator function.

<script type="text/JavaScript">

var EMAIL = /^[\w-\.]+\@[\w\.-]+\.[a-z]{2,4}$/;

Function ourFormValidator( form)

{

If(form.getElementByName('email').value == "") {

Alert('Please enter email address');

Return false;

}

If(form.getElementByName('password').value == "") {

Alert('Please neter your password');

Return false;

}

If(!EMAIL.test(form.getElementByName('email').value){

Alert('Please enter valid email address!');

Return false;

}

Return true;

}

</script>

This is the basic form control function. At first we define valid email format. Then in our function we check whether email and password values are empty or not. Then we test email value with our valid email format and if it return false we shows alert to enter valid email address. Otherwise we return true to submit form data to server.

I want to give you some input format to use and you can find more at internet :

var NUMBER = /^[\-]?\d*$/ ;

var REAL = /^[\-]?\d*\.?\d*$/;

var TEXTONLY = /^[a-zA-Z\.\-\s]*$/ ;

var PASSWORD = /^\w+$/ ;

var TEXT = /^[^<^>]*$/;

var DATE = /^(\d{1,2})\-(\d{1,2})\-(\d{4})$/;

var TIME = /^(\d{1,2})\:(\d{1,2})\:(\d{1,2})$/;

var EMAIL = /^[\w-\.]+\@[\w\.-]+\.[a-z]{2,4}$/;

var PHONE = /^[\d\s\-]+$/;