Faltu Funda

HTML form validations on submission of form using javascript

A javascript can be attached to all the input elements which are to be validated.  Suppose we've a text box where we need to get user's email id. So we can write the code like this
<input  type="text" onchange="javascript:validateEmail(this);return false;" />

here onchange   is a javascript function which will be called when value of element, where it is attached changes. So whenever value of input box changes and user removes focus from input box function "validateEmail" will be called. "this" argument is passed in validateEmail function. "this" is an object of the input box and with this all the properties of text box can be accessed. "validateEmail" will be something like this :

<script language="javascript">
<!--
    function validateEmail(obj){
  var re = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/;

 if(!re.test(obj.value)){
    alert('Please enter a valid email id');
    obj.focus();
}
return;

    }
-->
</script>

If we use this method for validations then user have to enter correct value to proceed next, once he entered in the specified input box. It is a vary tedious method for validations. we have to write a new function for every new field to be verified. and we have to write validation code on each html form where we want validations.

This method is much better then previous one. Here many algorithms can be applied to make code reusable and to make javascript unobtrusive. This method is used to make a generalized code for form data validations. Here javascript validation process will be  triggered on form submit event, means when user finally presses submit button.
Process can be attached in this way :
<form name="frm" action="" method="post" onsubmit="return validateForm(this);">
    <input type="text" name="name" />
    <input type="text" name="email" />
</form>

function "validateForm" will be something like this:
<script language="javascript">
<!--
    function validateForm(objFrm){
       var name = objFrm.name;
       var email = objFrm.email;
       if(checkBlank(name.value)){
          alert("Enter your name");
          name.focus();
          return false;
       }
       if(!checkEmail(email.value)){
         alert("Enter correct email");
          email.focus();
          return false;
       }
       return true;
    }

    function checkBlank(str){
       //here code to check blank value;
    }

    function checkEmail(str){
       // here code to validate email
    }
-->
</script>

This code is very easy to use and manage. Just you have to put this code on bottom of any html file where you want validations. But you have to change input fields name according to where you uses it.
This code is much better then first method, but still not so good. it is not perfectly reusable code, and it is not a generalized code also it is not unobtrusive.

Generalized form validation algorithm

If we can free above "validateForm" function  from field name and what to validate in form, then this function would become a generalized code. That means we need some intutive way to know that what to validate in input fields and which input fields are to be validated. in "validateForm" function we can fetch all the properties of all the input fields in the form we are validating. So, we need  there be some property of input fields by which function can know how to validate this field.  For this  we should be able to add properties to input's that can tell us to validate fields. so, we can add these properties in fields like this :

<input type="text" name="name" validate="blank" />
<input type="text" name="email" validate="email" />

Now these properties can be accessed and fields can be validated according to that. So, now "validateForm" function becomes a generalized code and can be used anywhere.
But this method won't work in all the browsers. some browsers do not allow such properties to be attached and accessed in input fields.
Another better way is to add "classes" to the fields that can insist function how to validate any input field. "class" property will work in all the browsers and more then one classes can be added. Class property of any input field can be easily accessed.
Class property of any input can be get by this :

input.className

If multiple classes are attached then this classname can be split using regular expression and then all parts can be get easily.
Now function can easily find what to validate in input filed.
class names can be intutive like:

jsfv_blank, jsfv_email, jsfv_date, jsfv_num, jsfv_0

here "jsfv_"  prefix is added to make it unique, also it stands for
"javascript form validatoin"

Now our code becomes fully reusable and generalized code.

Fully working example and source code for this can be downloaded from this site from "downloads" section.