1. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Hidaya Institute of Science & Technology www.histpk.org A Division of Hidaya Trust, Pakistan

2. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org FORM VALIDATION Client Side Validation Faheem Ahmed Khokhar

3. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Topics To be Covered Introducing Client side validation  Checking empty fields  Generating alerts for invalid data  Practice and Assignments

4. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Introduction When you create forms, providing form validation is useful to ensure that your customers enter valid and complete data. For example, you may want to ensure that someone inserts a valid e-mail address into a text box, or perhaps you want to ensure that someone fills in certain fields. Client-side validation provides validation within the browser on client computers through JavaScript. Because the code is stored within the page or within a linked file, it is downloaded into the browser when a user accesses the page and, therefore, doesn't require a roundtrip to the server. For this reason, client form validation can be faster than server-side validation. However, client-side validation may not work in all instances. A user may have a browser that doesn't support client-side scripting or may have scripting disabled in the browser. Knowing the limits of client-side scripting helps you decide whether to use client-side form validation.

5. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org How To Enable javascript Google Chrome Click the wrench icon on the browser toolbar. Select Options (Preferences on Mac and Linux; Settings on a Chromebook). Click the Show Advance Settings tab. Click Content settings in the "Privacy" section. JavaScript Allow all sites to run JavaScript (recommended) Do not allow any site to run JavaScript (incase to disable Javascript)

6. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Enable javascript Mozilla Firefox 3.6+ Click the Tools menu. Select Options. Click the Content tab. Select the 'Enable JavaScript' checkbox. Click the OK button. Apple Safari 2 or 3 Click the Safari menu. Select Preferences. Click the Security tab. Select the 'Enable JavaScript' checkbox

7. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Enable JavaScript Internet Explorer 6.0 Click the Tools menu. Select Internet Options. Click the Security tab. Click the Custom Level button. Scroll down until you see the 'Scripting' section. Select the 'Enable' radio button for ’Active Scripting.' Click the OK button. If you see a confirmation window, click the Yes button

8. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Checking Empty Fields

9. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Checking empty fields function chkEmpty() { var name= document.myform.txtName; var LName=document.myform.txtLName; If(name.value==“”) { document.getElementById(“txtNameMsg”).innerHTML=“Please fill the field”; name.focus(); } else If(LName.value==“”) { document.getElementById(“txtLNameMsg”).innerHTML=“Please fill the field”; LName.focus(); }

10. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Continued.. else { document.myform.submit(); }

11. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Generating Alerts For Invalid Data

12. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Regular Expressions

13. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Regular Expressions Regular expressions are very powerful tools for performing pattern matches. PERL programmers and UNIX shell programmers have enjoyed the benefits of regular expressions for years. Once you master the pattern language, most validation tasks become trivial. You can perform complex tasks that once required lengthy procedures with just a few lines of code using regular expressions. So how are regular expressions implemented in JavaScript? There are two ways: 1) Using literal syntax. 2) When you need to dynamically construct the regular expression, via the RegExp() constructor. The literal syntax looks something like: var RegularExpression = /pattern/ while the RegExp() constructor method looks like var RegularExpression = new RegExp("pattern"); The RegExp() method allows you to dynamically construct the search pattern as a string, and is useful when the pattern is not known ahead of time.

14. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Regular expressions syntax [abc]a, b, or c [a-z]Any lowercase letter [^A-Z]Any character that is not a uppercase letter [a-z]+One or more lowercase letters [0-9.-]Any number, dot, or minus sign ^[a-zA-Z0-9_]{1,}$Any word of at least one letter, number or _ [^A-Za-z0-9]Any symbol (not a number or a letter) ([A-Z]{3}|[0-9]{4})Matches three letters or four numbers

15. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org MetacharacterDescription \wFinds word character i.e. (alphabets and number) \WFinds non-word character i.e. (Special Characters) \d Finds digit i.e. (Numbers) \DFinds non-digit character i.e. (alphabets and Special Characters) Metacharacters Metacharacters are characters with a special meaning:

16. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Pattern Switches or Modifiers

17. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org use switches to make the match global or case- insensitive or both: Switches are added to the very end of a regular expression. PropertyDescriptionExample i Ignore the case of character/The/i matches "the" and "The" and "tHe" g Global search for all occurrences of a pattern /ain/g matches both "ain"s in "No pain no gain", instead of just the first. gi Global search, ignore case./it/gi matches all "it"s in "It is our IT department"

18. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript RegExp Object

19. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org What is RegExp? A regular expression is an object that describes a pattern of characters. When you search in a text, you can use a pattern to describe what you are searching for. A simple pattern can be one single character. A more complicated pattern can consist of more characters, and can be used for parsing, format checking, substitution and more. Regular expressions are used to perform powerful pattern-matching and "search-and- replace" functions on text. Syntax var patt=new RegExp(pattern,modifiers); or more simply: var patt=/pattern/modifiers;

20. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org How to Create Patterns

21. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Creating a pattern Example 1 : Var pattern = new RegExp(/^[a-z ]{1,}$/); or Var pattern = /^[a-z]{1,}$/; Var pattern = new RegExp($pattern); or Var pattern = new RegExp(“^[a-z]{1,}$”); or Var pattern = “^[a-z]{1,}$”; Var pattern = new RegExp($pattern); Description : It will accept only a to z alphabets or only alpha numeric characters, having minimum length of 1.

22. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Creating a pattern Continued….. Example 2 : Var pattern = new RegExp(/^[0-9]{1,}$/); or Var pattern = /^[0-9]{1,}$/; Var pattern = new RegExp(pattern); or Var pattern = new RegExp(“^[0-9]{1,}$”); or Var pattern = “^[0-9]{1,}$”; Var pattern = new RegExp(pattern); Description : It will accept only numbers between 0 to 9 or only numeric characters, having minimum length of 1.

23. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Matching Patterns

24. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript test() Method The test() method tests for a match in a string. This method returns true if it finds a match, otherwise it returns false. Syntax RegExpObject.test(string) Example 1: var str="Hello world!"; var patt=/Hello/g; var result=patt.test(str); document.write("Returned value: " + result); ParameterDescription stringRequired. The string to be searched

25. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript test() Method contined… Example 2: var pattern =new RegExp(/^[a-z]{1,}$/); var string = "hello world"; var result = pattern.test(string); document.write("The result = "+ result);

26. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript exec() Method The exec() method tests for a match in a string. This method returns the matched text if it finds a match, otherwise it returns null. Syntax RegExpObject.exec(string) Example 1: var str="Hello world!"; var patt=/Hello/g; var result=patt.exec(str); document.write("Returned value: " + result); ParameterDescription stringRequired. The string to be searched

27. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript exec() Method continued.. Example 2 var str="The rain in SPAIN stays mainly in the plain"; var pattern = new RegExp(/[a-z]{1,}/gi); var result = pattern.exec(str); document.write("The result = "+ result);

28. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript replace() Method The replace() method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced. Syntax string.replace(searchvalue,newvalue) String is the return type of replace() method ParameterDescription searchvalue Required. The value, or regular expression, that will be replaced by the new value newvalueRequired. The value to replace the searchvalue with

29. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript replace() Method continued Example 1: var str="Mr Blue has a blue house and a blue car"; var n=str.replace(/blue/g,"red"); document.write(n);

30. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Highlight text (source code) Note : Copy and paste the code to dreamweaver or Notepad Untitled Document.yellow{ display:inline; background-color:#FF0; } function f() { //alert("It works"); var str =document.getElementById("paragraph").innerHTML; //alert(str); var Search = document.getElementById("Search").value; //alert(Search); var pattern = new RegExp(Search,"gi"); //alert(pattern); var found = pattern.exec(str); if(found){ var MySearch=str.replace(pattern," "+found+" "); document.getElementById("paragraph").innerHTML=MySearch; } else { alert("No Matches Found"); } Search : When you create forms, providing form validation is useful to ensure that your customers enter valid and complete data. For example, you may want to ensure that someone inserts a valid e-mail address into a text box, or perhaps you want to ensure that someone fills in certain fields. Client-side validation provides validation within the browser on client computers through JavaScript. Because the code is stored within the page or within a linked file, it is downloaded into the browser when a user accesses the page and, therefore, doesn't require a roundtrip to the server. For this reason, client form validation can be faster than server-side validation. However, client-side validation may not work in all instances. A user may have a browser that doesn't support client-side scripting or may have scripting disabled in the browser. Knowing the limits of client-side scripting helps you decide whether to use client-side form validation. this is new paragraph line 2

31. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript match() Method The match() method searches a string for a match against a regular expression, and returns the matches, as an Array object. Note: If the regular expression does not include the g modifier (to perform a global search), the match() method will return only the first match in the string. This method returns null if no match is found. Syntax string.match(regexp) The return type of match() method is array. ParameterDescription regexpRequired. The value to search for, as a regular expression.

32. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript match() Method continued.. Example 1: var str="The rain in SPAIN stays mainly in the plain"; var result=str.match(/ain/gi); document.write("The result = "+ result); The result of n will be: ain,AIN,ain,ain

33. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript match() Method continued.. Example 2: var pattern = new RegExp(/ain/gi); var result = str.match(pattern); document.write("The result = "+ result); The result of n will be: ain,AIN,ain,ain

34. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript match() Method continued.. Example 3: var str ="The rain in SPAIN stays mainly in the plain"; var pattern = new RegExp(/ [a-z]{1,}/gi); var result = str.match(pattern); document.write("The result = "+ result); The result of n will be: The,rain,in,SPAIN,stays,mainly,in,the,plain

35. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript search() Method The search() method searches a string for a specified value, or regular expression, and returns the position of the match. This method returns -1 if no match is found. Syntax string.search(searchvalue) The return type is integer. Example var str=“Hidaya Trust!"; var n=str.search(“Trust"); The result of n will be: 7 ParameterDescription searchvalueRequired. The value, or regular expression, to search for.

36. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org JavaScript search() Method continued… Example 2: var str="Mr Blue has a blue house and a blue car"; var result=str.search(/blue/g); document.write(result);

37. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Submit First Name Last Name CNIC # Assignment Enter Name Enter Last Name Enter CNIC number Please fill the field Invalid Format, Only alpha numeric characters are alowed

38. © Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● www.hidayatrust.org / www,histpk.org Output