JAVASCRIPT VALIDATION (WHY & HOW)
JAVASCRIPT VALIDATION (WHY & HOW)
In the web to add interactivity forms play a major role. To get an input from the user and then to process a request based on the input provided, forms are used. In most of the webpages you would see a form to get some data from you. That can be a Login Form, Registration Form, Comment Form, Mail to Admin form or some special purpose forms which are famous nowadays such as a forms providing Mobile Recharge by requesting Provider Name, Mobile Number, Amount of Recharge, Bank Card Number, Pin Number, etc. You can remember now a form for Booking Train tickets in IRCTC too. Those forms consists of fields, such as Textboxes, Drop Down List boxes, Radio Buttons, Check Boxes, Labels, Submit Buttons and so on. The data is obtained from the users through these fields. Given below is a screenshot of a typical Gmail Registration Page Fig (a) Before Validation Fig (b) After Validation.Figure (a)
Figure (b)
Before going in to the topic let us discuss some important terms in layman mode about client, server, scripting language, scripts and so on. Let me explain these concepts to you in brief.
Server:
Consider a website is developed in Java. Every website is a project. You should know now, that for executing the project in a local machine, the machine should have some software called a server software. It can be Apache, Tomcat, etc. The computer needs the application software (In this case it could be a JVM). The computer should also have a database application which could be (MySql, Oracle, etc.,). If all the above tools are available in a computer, the project can be executed on that computer. And the computer may now called as a Local Server.
In addition to them, if the computer is connected to Internet, that computer can serve as a server. In this case the computer can be called as a Remote Server.
So let me now tell you in brief what a Server is. A server is a computer which comprises of a Server Software, Application Software, Database needed for the project to be executed on it. If the server is connected to the internet, it may be called as a Remote Server.
A server could serve one or more computers based on its capacity. Let us consider that Gmail.Com in our case, is too located in a Server which is connected to internet. So that we can access the website.
Server Side Scripting Languages:
Server scripting languages are the languages which are used to code the project. The website could be developed using programming language such as C# or VB if the project(website) is developed in .Net. The programming language could be Java if the project(website) is developed in Java. In these cases the languages C#, VB, .Net are called as Server Side Scripting Languages or Server Scripting Languages Since it require a Server software such as a .Net or Java to be installed in server for the execution of the code.
Client Side Scripting Languages:
Client Side scripting languages are the languages which are used in validations and designing the front end of the web pages. Some examples of Client Side Scripting Languages are JavaScript, VBScript, etc. Such languages doesn’t need any explicit software for execution. Web browser itself interprets the code of Client side scripting languages.
Validation Necessary or Not:
Now let us come to a decision that whether validation is mandatory or not. Let us discuss. Consider a Gmail Registration Page, there are certain rules for creating an email id such as
- All the fields are mandatory and should not be empty
- FirstName and LastName should not contain Digits
- Email Id should not contain any special characters except . and _
- Password should be atleast 8 characters in length
- Mobile Number should contain only digits and no alphabets should be allowed.
The above rules are mandatory in a Gmail registration page, because errors can occur while entering the data and such errors may lead to a faulty processing. These errors are common and they can be validated in Javascript. These can also be validated using C# or Java, but since they are Server Side Scripting Languages, they run on server. For each validation a request will be sent to the server and a response would be received form the server, which increases the load of the server. So the website would react slow. So we should reduce the work load given to the server by performing some actions in client side (Browser) itself. One of the most powerful language used for performing Client Side Validation is Javascript.
So, with the help of Client Side Scripting Languages like JavaScript, we reduce the burden sent to the server. As the code runs on Client Browser, validations are performed very fast. Almost all modern web browsers have the support of JavaScript and so it would be more preferable to use Javascript for Validating Input
Validations can be performed in two levels, such as
- Basic Validation
- Format Validation
Basic Validation:
The validations for checking for empty fields are called as Basic Validations. All mandatory fields that should be filled up can be validated using these basic validations.
Given below is a Javascript Code which validates a textbox for Non-Empty Values
Code:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
return( true );
}</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Format Validation
Format Validation is special type of validation by which a filed is validated against user defined conditions such as FirstName and LastName should not contain Digits, Email Id should not contain any special characters except . and _, Password should be atleast 8 characters in length, Mobile Number should contain only digits and no alphabets should be allowed.
Given below is a code which consist of some fields with format validation.
Code:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate()
{
if(isNaN( document.myForm.Zip.value ))
{
alert( "Please provide a zip in the format #####." );
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
isNaN( document.myForm.Zip.value )
In this code NaN stands for Not-A-Number. So the code checks the value entered in the ZipCode Field is Not a Number for Not. If it is Not a Number then an alert message must be displayed and the form should not be submitted. So in the IF CONDITION of If(IsNan) we have coded as return false; which means that the form should not be submitted.
document.myForm.Country.value == "-1"
You can note down the option values provided in the HTML code to get the meaning of the code
So, based on the code if the option value is -1 then the form should not be submitted.
This is just a basic to learn Javascript Validation, for more advanced coding refer books or Internet.
THANKYOU FOR READING MY ARTICLE
Share story!
0 comments