Advertisment

Validate your Web Form

author-image
PCQ Bureau
New Update

The validation of user input on a Web-based form is not a new, but a recurring, topic. Validation ensures that the user has entered correct data in an HTML form. 

Advertisment

There are two types of validations: server side and client side. In the former case, user inputs are sent to the Web server, where they are validated by a server-side script written in ASP, ASP .NET, PHP, JSP, Servlets or Perl CGI. If the input is incorrect, the web server sends the form back to the user to re-enter the correct value.

In client-side validation, user inputs are validated within the Web browser by a client-side script such as JavaScript or VBScript. This method is preferred over server-side validation as it saves the roundtrip to the server when the validation fails.

With client-side validation you can ensure that correct data is sent to the server, at the very first place. 

Advertisment
Using a validation library you can ensure that correct data goes into the database

You can find numerous methods, tips and tricks and utilities (components and applets) on the Internet for carrying out form validations. You search for one and you will end up with many. Or, you could use the one that I have developed. It is a library of JavaScript validation functions, which I use in my Web-based projects. The library contains basic but frequently used validations for required fields, integer and decimal values, maximum characters in a textarea, select lists and date. On this month’s CD, you will find a file named validate.js (in the directory cdrom/src_code/validation) that contains the validation functions. 

To begin with 



All the pages in which you intend to use the validations must contain the following line between the tag pair. 







The HTML form that needs to be validated should have a name and must call a function–say, validate( )–when submitted. For example,





Define the validate( ) function between the tag pair as:


The validate( ) function must return either true or false–true when validation succeeds (ie, no fields in the form have incorrect values) and false otherwise. We will write our validation code before the ‘return true;’ statement. The validation code will return false if the form fields contain incorrect value (as explained later). The validation code will include calling various validation functions in the library. 

First looks 



To look at how the validation library works, open the file named validationtest.htm found in the directory src_code/validation on the CD in your Web browser. Play with it for a while by entering different values in the form fields and clicking on the submit button to see the validations at work. You may open the HTML file in a text editor and look the JavaScript code.

Below is a brief explanation of how to use these validation functions in your HTML form.

Required field validation



Suppose you have a text field in the form named ‘field1’ and want to ensure that something is typed in the text field (ie, it cannot be leaved empty). The code to achieve this will be as follows.

First, you declare an array named ‘elements’ (for example). Each element of this array will correspond to the form field to be validated and the error message to be flashed in case of incorrect value. The statement 






elements <0> = new Array(“field1”,”Error: Cannot be empty”);










follows the following syntax.







elements <> = new Array(“”,””);


Suppose you have a second field named ‘field2’, which, too, has to be checked against being empty, then you just need to add a second array element after the elements<0> statement as:






elements <1> = new Array(“field2”,”Error: Cannot be empty”);

The function checkEmptyField accepts two parameters: the reference to the form as a string and the elements array. This function iterates through the field array and the moment it finds an empty field, it flashes a JavaScript alert containing the error message and returns a false. Note that if the user enters just spaces in the text field, this function will invalidate the input. 

Why arrays?



You may ask why arrays are used for referring to fields? Why not simply pass the form name, field name and the error message to the validation function? This is because in case of large forms you will end up doing similar validations for many fields. Using array methodology comes in handy in such cases. You can construct an array containing elements corresponding to all the fields, which are to be validated against empty values and pass it to the checkEmptyField function for validation.

Other validation functions discussed below also accept arrays as parameters. 

Integer validation



Using checkInteger( ) function in the validation library, you can validate a field against negative and non-numeric values. Its usage is similar to the required field validation. 

elements = new Array();



elements<0> = new Array(“field2”,”Error: Not a valid integer value”);


if (checkInteger(“document.test_form”,elements) == false)


return false;

Note that the checkInteger function will flash an error even if you enter a decimal value. The only permissible values are zero and non-negative integers. 

Decimal validation



Using the checkDecimal( ) function, you can ensure that a user has entered a non-negative, integer or decimal value. The function also ensures that there are not more than two digits after the decimal point (which is a typically required when prompting for price or quantity). Like checkInteger( ), this function does accept a zero(0). Its usage is as follows.

elements = new Array();



elements<0> = new Array(“field3”,”Error: Not a valid decimal value”,”Error: Not an acceptable decimal value”);


if (checkDecimal(“document.test_form”,elements) == false)


return false;

Note that in this case the elements array is constructed as:

elements <> = new Array(“”,””,””);

The second error message is flashed when there are more than two digits after the decimal point. 






Textarea length validation



An HTML textarea does not have a maxlength property to limit the number of characters types in it. The function checkLengthOfTextArea( ) flashes an alert when the user enters more than the permissible number of characters in a

textarea.



The usage is as follows:

elements = new Array();



elements<0> = new Array(“field4”,”Error”,10);


if (checkLengthOfTextArea(“document.test_form”,elements) == false)


return false;

Note that in this case the elements array is constructed as:






elements <> = new Array(“”,””,);

Here with , you specify the maxlength for the textarea. 

Select list validation



For this validation to work, you must construct a select list as follows.







Advertisment