Subscribe Now

Receive alert message from us when new articles submitted to our site for free.

Enter Your Name
Enter Your E-Mail

Sponsors

Internet Marketing
Business Letter
Nursing job opportunities


Categories



Search the Articles


Sign Up Here

Home / Computer Programming / Javascript


Print | Send To Friends | Add To Favorites | Comment

Validating Form Input in JavaScript

By: Amrit Hallan

Article Word Count: 1171 words  [Comments (0)]
Total Views: 154 Views






This time we'll make a form that collects information about the




visitor at your site. You must have filled-in copious




registration forms or survey forms where you had to enter your




name, your email, your address, etc. Sometimes users,




intentionally or unintentionally, enter wrong information that




can either spoil your database scheme or give you lots of




useless data and hence, waste your precious server space.









To avoid such problems, as much as it can be managed, we




programmatically try to make sure, that data is entered in an




orderly fashion, and no unusable fields are entered. Checking




individual 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 no




numbers in the Name field [1,2,3,4,.], and in the Email field,




no email should be without the "@" sign. We can carry out more




complex validations, but at the moment, these three should




suffice.









/// Remove the extra dots while testing. They have been just




inserted so that some email programs don't freak out at the




presence of a JavaScript in the email.









<..script language="JavaScript1.2"> function CheckName(HoldName)




{ NoNumThere='true'; for(i=0; i



j<10; j++) { if(HoldName.charAt(i)==j.toString()) {




NoNumThere='false'; break; } } if(NoNumThere=='false') { break;




} } return NoNumThere; } function CheckMail(HoldMail) {




IsValid='true'; if(HoldMail.indexOf("@")<=0) { IsValid='false';




} return IsValid; } function checkfields() { var




AllFilled='true'; for(i=0; i<3; i++) {




if(visitor.elements[i].value.length==0) { alert("The field [" +




visitor.elements[i].name + "] can not be left blank.");




AllFilled='false'; visitor.elements[i].focus; return; } }




if(AllFilled=='true') { var NameValid=true; var EmailValid=true;




NameValid=CheckName(visitor.vname.value);




EmailValid=CheckMail(visitor.vemail.value);




if(NameValid=='false') { alert("Sorry, your name can not contain




numbers."); visitor.vname.focus; } if(EmailValid=='false') {




alert("Sorry, this does not seem like a valid email address.");




} } if(NameValid=='true' & EmailValid=='true') {




alert("RIGHTO!!!"); } }





Enter your name:









Enter you phone:









Enter your email:













onclick="checkfields();">



value="Reset">




















Copy and paste the code as it is, and save the entire content as




a new HTML page. Then load it on to your browser. Unless you see




the result, it'll be difficult to follow the script if you do




not have prior programming background. The first condition is,




none of the fields can be submitted blank. Click on the submit




button 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 certain




validations. Our main function, checkfields(), is associated




with the OnClick attribute of the "Submit" button, that is, when




you 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 called




Boolean operators, which means, a Boolean variable can either be




true or false, but NEVER both.









Until we learn about arrays, every character in a string has an




index 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() var




char2=num2.toString()









So,









num1+num2=52 and char1+char2=3221









In the second case, instead of being added, the variables are




being concatenated, which indicates that they are strings, not




numbers. We'll see its application later.









break, true to its name, breaks something. In this case, it




breaks the loop in which it occurs, and takes the execution of




the program to the line immediately after the loop, without




meeting the condition required to complete the loop.









indexOf() tells us about the position of a particular character




in a string. Look its use in the following code:









var city="Delhi"









Referring to this code, city.indexOf("e") should give us a value




1 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 them




yet, so we leave the rest of the explanation to the next




section.




Grab this articles

Related articles


Newest Articles

Most Popular Articles