Lecture 17You will learn in this LectureFormValidation     - Text Box validation     - Check Box validation     - Password...
So, Now let us start with validating user input.When we make a form, we ask the user to enter username, password, and maya...
<input type="text" name="fname"> <br>            <input type="text" name="lname"> <br>            <input type="submit" onC...
if (objForm.Make.selectedIndex == 0) {      alert("Please select a car make");      returnStatus = 0;      }      else    ...
alert("You selected" +objForm.Make.options[objForm.Make.selectedIndex].text + objForm.Make.value);      if (objForm.Make.s...
objForm.Type.options[3].text="v4";            objForm.Type.options[3].value="4";      }      }}// --></SCRIPT></HEAD><BODY...
Upcoming SlideShare
Loading in …5
×

Html basics 11 form validation

2,111 views
2,049 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,111
On SlideShare
0
From Embeds
0
Number of Embeds
1,748
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html basics 11 form validation

  1. 1. Lecture 17You will learn in this LectureFormValidation - Text Box validation - Check Box validation - Password validation - select list box validationBefore starting with this lecture, There are few questions that deserve to beanswered, What is validation and Why is it requried? Let me answer the firstquestion and then we will move on to the second question.So, the first question is, What is validation?Validation test for required strings contain a specific value, a range of acceptedvalue or a pattern of acceptable format. For example, If you make a form, andask the user to enter name, email address, and comment. If he leaves every fieldblank, and click Enter. You will not get any information.This means we are validating (checking) the values entered by the user, if he hasentered some value or not, if not, then ask him to enter the value and if he hasentered wrong value,then ask him to enter the correct value.I hope you must have got the answer, why validation is required.Next question is How validation is done, just read the following lines.So, as soon as the user clicks Enter, There are two possibilites1. Send the data that use has entered to the server, and check the values, ifthere are any, if there are no values entered by him or if wrong values areentered by him, ask him to enter the value, and move back to the same form.2. Or, before sending the data to the server, check whether user has entered anyvalue or not. If he has entered the value, then the value is corrent or not.Second method is what we will follow, and is called as client side scripting,whereas the first method is called as Serve side scripting. JavaScript is popularfor client side scripting and ASP, JSP, PHP are popular for server side scripting.It is high time to understand the difference between Client Side Scripting andServer Side Scripting.When we use a scripting language, that works on the server side, it is called asServer Side Scripting language,If we use a scripting language, that works on client side (i.e. browser), it is calledas Client Side Scripting language.
  2. 2. So, Now let us start with validating user input.When we make a form, we ask the user to enter username, password, and mayask him to fill up some check boxes, radio butons, and also ask him to writesome comments. It is compulsay for the user to enter username, and password,but it is not compulsay for him to give his comments. So the things that arecompulsary, cannot be left blank. This is one of the validation, forcing the usernot to leave a field blank.Let me list down some of the common validations needed- Password Validation- Text Field not blank (Name)Below is the code for Text Box validation<html><head> <script language="JavaScript"> function validate() { firstName=document.myForm.fname.value; lastName=document.myForm.fname.value; if(firstName=="") window.alert("Name Field cannot be left blank"); if(lastName=="") window.alert("Name Field cannot be left blank"); switch (firstName.charAt(0)) { case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9": window.alert("First chaaracter cannot be a number"); } } </script></head> <body> <form name="myForm">
  3. 3. <input type="text" name="fname"> <br> <input type="text" name="lname"> <br> <input type="submit" onClick="validate()"> <br> </form> </body></html>And, Now we have the code for Password Validation<html><head> <script language="JavaScript"> function validate() { passwd=document.myForm.pass; cpasswd=document.myForm.cpass; if (passwd=="") window.alert("Password field cannot be blank"); if (cpasswd=="") window.alert("Confirm Password field cannot be blank"); if (passwd!=cpasswd) window.alert("Passwords dont match"); } </script></head> <body> <form name="myForm"> Password<input type="password" name="pass"> <br> Confirm password<input type="password" name="cpass"> <br> <input type="submit" onClick="validate()"> <br> </form> </body></html>Validate Selection List<HTML><HEAD><SCRIPT LANGUAGE="JavaScript"><!--function validateForm(objForm){ var returnStatus = 1;
  4. 4. if (objForm.Make.selectedIndex == 0) { alert("Please select a car make"); returnStatus = 0; } else alert("You selected" +objForm.Make.options[objForm.Make.selectedIndex].text + objForm.Make.value); if (returnStatus) { objForm.submit(); }}// --></SCRIPT></HEAD><BODY><FORM ACTION="test.asp" NAME="testform"><SELECT NAME="Make"> <OPTION VALUE="0" SELECTED>Select One</OPTION> <OPTION VALUE="1">Ford</OPTION> <OPTION VALUE="2">Chevy</OPTION> <OPTION VALUE="3">Pontiac</OPTION> <OPTION VALUE="4">Dodge</OPTION></SELECT><INPUT TYPE="BUTTON" VALUE="Send form"onClick="validateForm(document.testform)"></FORM></BODY></HTML>Dynamically Populating a Selectin List<HTML><HEAD><SCRIPT LANGUAGE="JavaScript"><!--function populate(objForm){ if (objForm.Make.selectedIndex == 0) { alert("Please select a car make"); } else {
  5. 5. alert("You selected" +objForm.Make.options[objForm.Make.selectedIndex].text + objForm.Make.value); if (objForm.Make.selectedIndex == 1) { objForm.Type.length=2; objForm.Type.options[0].text="d1"; objForm.Type.options[0].value="1"; objForm.Type.options[1].text="d2"; objForm.Type.options[1].value="2"; } if (objForm.Make.selectedIndex == 2) { objForm.Type.length=2; objForm.Type.options[0].text="h1"; objForm.Type.options[0].value="1"; objForm.Type.options[1].text="h2"; objForm.Type.options[1].value="2"; } if (objForm.Make.selectedIndex == 3) { objForm.Type.length=3; objForm.Type.options[0].text="m1"; objForm.Type.options[0].value="1"; objForm.Type.options[1].text="m2"; objForm.Type.options[1].value="2"; objForm.Type.options[2].text="m3"; objForm.Type.options[2].value="3"; } if (objForm.Make.selectedIndex == 4) { objForm.Type.length=4; objForm.Type.options[0].text="v1"; objForm.Type.options[0].value="1"; objForm.Type.options[1].text="v2"; objForm.Type.options[1].value="2"; objForm.Type.options[2].text="v3"; objForm.Type.options[2].value="3";
  6. 6. objForm.Type.options[3].text="v4"; objForm.Type.options[3].value="4"; } }}// --></SCRIPT></HEAD><BODY><FORM ACTION="test.asp" NAME="testform"><SELECT NAME="Make" onChange="populate(document.testform)"> <OPTION VALUE="0" SELECTED>Select One</OPTION> <OPTION VALUE="1">Daewoo</OPTION> <OPTION VALUE="2">Hyundae</OPTION> <OPTION VALUE="3">Mercedes</OPTION> <OPTION VALUE="4">Volswagen</OPTION></SELECT><SELECT NAME="Type"></SELECT><INPUT TYPE="BUTTON" VALUE="Send form"onClick="validateForm(document.testform)"></FORM></BODY></HTML>Validating a Check Box

×