T-XU.COM      
Home |
  Home>Computer Programming>Javascript>
Validating Form Input in JavaScript
By Amrit Hallan        [Hits: 5855]



This time we'll make a form that collects information about thevisitor at your site. You must have filled-in copiousregistration forms or survey forms where you had to enter yourname, your email, your address, etc. Sometimes users,intentionally or unintentionally, enter wrong information thatcan either spoil your database scheme or give you lots ofuseless data and hence, waste your precious server space.

To avoid such problems, as much as it can be managed, weprogrammatically try to make sure, that data is entered in anorderly fashion, and no unusable fields are entered. Checkingindividual fields of the form does this.

We'll see a form here with three fields: Name, Phone and Email.In this form, no field should be left blank, there should be nonumbers in the Name field [1,2,3,4,.], and in the Email field,no email should be without the "@" sign. We can carry out morecomplex validations, but at the moment, these three shouldsuffice.

/// Remove the extra dots while testing. They have been justinserted so that some email programs don't freak out at thepresence of a JavaScript in the email.

<..script language="JavaScript1.2"> function CheckName(HoldName){ NoNumThere='true'; for(i=0; i
Enter your name:

Enter you phone:

Enter your email:





Copy and paste the code as it is, and save the entire content asa new HTML page. Then load it on to your browser. Unless you seethe result, it'll be difficult to follow the script if you donot have prior programming background. The first condition is,none of the fields can be submitted blank. Click on the submitbutton without entering anything and observe the reaction.

Here, we are making ample use of the recently learnt for(){.}loop. Then we have used function too, to carry out certainvalidations. Our main function, checkfields(), is associatedwith the OnClick attribute of the "Submit" button, that is, whenyou click on the "Submit" button, this function gets triggered.

Some new terms in today's script are: true, false, charAt(),toString(), break, indexOf(), string.length, and orm.elements[ ].

A quick explanation to make things easier:

If at 10:30 pm, I say, "It is night", then

var fact='true'

and if I say at 10:30 pm that "It's afternoon", then

var fact='false'

Which explains the use of true and false, which are also calledBoolean operators, which means, a Boolean variable can either betrue or false, but NEVER both.

Until we learn about arrays, every character in a string has anindex position. For instance, if we have

var city="Delhi"

then city.charAt(0)="D", city.charAt(1)="e",city.charAt(2)="l"...city.charAt(4)="i".

toString(), converts another data type to a string data-type.For example,

var num1=31 var num2=21 var char1=num1.toString() varchar2=num2.toString()

So,

num1+num2=52 and char1+char2=3221

In the second case, instead of being added, the variables arebeing concatenated, which indicates that they are strings, notnumbers. We'll see its application later.

break, true to its name, breaks something. In this case, itbreaks the loop in which it occurs, and takes the execution ofthe program to the line immediately after the loop, withoutmeeting the condition required to complete the loop.

indexOf() tells us about the position of a particular characterin a string. Look its use in the following code:

var city="Delhi"

Referring to this code, city.indexOf("e") should give us a value1 and city.indexOf("h") should give us a value 3.city.indexOf("z") should give us a value less than zero,indicating that it does not belong to the given string.

String.length gives us the length of the string, for instance,if city="Delhi", then city.length would give us 5.

Again, elements[ ] is an array, and we haven't dealt with themyet, so we leave the rest of the explanation to the nextsection.
  Top Articles
*Using External JavaScript File
*Simplified form to mail: Unlim
*Capturing Video And Audio Stre
*Building HTML codes automatica
*How to handle web surfers, who
*Instant plug-in scripts that h
*Anti right-click pop up : pop
*Validating Numerical Input wit
*New Customizable JavaScript Me
*Ask Mr. D - JavaScript
*Inexpensive Area Rugs Give You
*Spice Up Your Web Site with Ja
  Related Articles
*Some Useful JavaScript Tricks
*Using External JavaScript File
*Grow Your Subscribers Exponent
*Guide to creating simple chrom
*Ask Mr. D - JavaScript
*Dirty Web Promotion Tricks #1
*Javascript; Browser Detection
*Spice Up Your Web Site with Ja
*Javascript Basics 01
*Make your website scream with
*Instant plug-in scripts that h
*Validating Numerical Input wit


Prev: Some Useful JavaScript Tricks   Next: Using External JavaScript Files



Home | Site Map | Bookmark this site | T-XU RSS
Copyright 2007 T-XU.com - All Rights Reserved Worldwide.