May 28, 2011

Form validation - Javascript client side programming

When we are developing a web based software we must think about 2 things. One is server side and the other is client side. In the server side it will host the logic of the software and maybe the data storage. But all user interactions will be happen in the client side. If a user need to input some values, (maybe filling a form) each submit will send a http message to the server. Then according to the message it will give the response (maybe storing values in a database).

So why form validation? Forms are the main method that used to get inputs from a user. Users can input what ever he/she wants. So we can not think that a user will only fill the form according to the requirement or he/she may miss an important field. If something happens like this, it will harm the software. So to avoid such a thing we use validation.

To do the validation we get user input and check whether user inputs are according to the needs of the software. As an example, if the software need an 3 digit number, in the validation process it will check if the user had input a 3 digit number or something else. If the validation pass (user had input exactly a 3 digit number) software will continue its process(maybe storing in a database). But if the validation process fails (user had input something else), software will stop its process and it must request to re-enter the information correctly. So this request will cost some extra http requests. More http requests will cost more network usage and more network traffic. If the user enter wrong information for several times this will be worse.

To avoid this overhead we must move the validation part to the client side. From this approach we will only get valid information from the client side. So it will reduce unnecessary http requests. We can use Javascript, a client side programing language to do this.

<form action="process.php" method="POST">
<input type="text" name="myinput" id="myinput"  maxlength="5" >
<input type="submit" value="Submit" onClick="return validate()" />
</form>


<script type="text/javascript">
function validate()
{
var ret=true;
var input=document.getElementById("myinput").value;
if( input==null || input=="" )
{
  alert("Field is empty.");
  ret=false;
}
return ret;
}
</script>

This is a basic validation form. In this forms input field you can see something like " maxlength="5" ". It is a attribute in input tag. It can limit the number of input characters to 5. Then in the other input field (Submit button) you can see something like " onClick="return validate()" ". This is the most important part of the form. When a user click the submit button, it will trigger the "onClick" event. According to this form onClick event will call a function called " validate() ". This function will return true or false. So after user click the submit button it will be like onClick="return true" or onClick="return false". If the onClick event returns true, form will send the http request to the server. If the onClick event returns false, it will not send a http request and we can inform about the error by giving a popup like in this code.

Note:-
Although this reduce unnecessary http requests, it will add some extra code in to the html page. And also you must validate the inputs in the server side again though you validate it in the client side. There are ways to hack this client side validation process easily.