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

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

PHP Form and File Handling
PHP I.
1 After completing this lesson, you will be able to: Check spelling in a document. Check for grammatical errors. Find specific text. Replace specific text.
FORM VALIDATION Faheem Ahmed Khokhar. FORM VALIDATION Faheem Ahmed Khokhar.
Introducing JavaScript
Essentials for Design JavaScript Level One Michael Brooks
Java Script Session1 INTRODUCTION.
Tutorial 6 Creating a Web Form
Ch3: Introduction to HTML5 part 2 Dr. Abdullah Almutairi ISC 340 Fall 2014.
The Web Warrior Guide to Web Design Technologies
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
Tutorial 10 Programming with JavaScript
Tutorial 14 Working with Forms and Regular Expressions.
CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang.
XP Tutorial 1 New Perspectives on JavaScript, Comprehensive1 Introducing JavaScript Hiding Addresses from Spammers.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
Introduction to scripting
 2004 Prentice Hall, Inc. All rights reserved. Chapter 25 – Perl and CGI (Common Gateway Interface) Outline 25.1 Introduction 25.2 Perl 25.3 String Processing.
COMPREHENSIVE Excel Tutorial 8 Developing an Excel Application.
Chapter 9 Introduction to ActionScript 3.0. Chapter 9 Lessons 1.Understand ActionScript Work with instances of movie clip symbols 3.Use code snippets.
CST JavaScript Validating Form Data with JavaScript.
XP Tutorial 14 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Forms and Regular Expressions Validating a Web Form with JavaScript.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
Tutorial 14 Working with Forms and Regular Expressions.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
XP 1 Microsoft Word 2002 Tutorial 1 – Creating a Document.
1 JavaScript in Context. Server-Side Programming.
Tutorial 10 Programming with JavaScript. XP Objectives Learn the history of JavaScript Create a script element Understand basic JavaScript syntax Write.
Tutorial 10 Programming with JavaScript
Done by: Hanadi Muhsen1 Tutorial 1.  Learn the history of JavaScript  Create a script element  Write text to a Web page with JavaScript  Understand.
Microsoft Visual Basic 2005 CHAPTER 7 Creating Web Applications.
RegExp. Regular Expression A regular expression is a certain way to describe a pattern of characters. Pattern-matching or keyword search. Regular expressions.
Productivity Programs Common Features and Commands.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Overview of Form and Javascript fundamentals. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2.
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
XP Tutorial 8 Adding Interactivity with ActionScript.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
INT222 – Internet Fundamentals Week 11: RegExp Object and HTML5 Form Validation 1.
Project 5: Using Pop-Up Windows Essentials for Design JavaScript Level One Michael Brooks.
XP Tutorial 7 New Perspectives on JavaScript, Comprehensive 1 Working with Forms and Regular Expressions Validating a Web Form with JavaScript.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
Strings Robin Burke IT 130. Outline Objects Strings methods properties Basic methods Form validation.
Candidate’s System Specification & Configuration.
JavaScript and AJAX 2nd Edition Tutorial 1 Programming with JavaScript.
Excel Tutorial 8 Developing an Excel Application
CS 330 Class 7 Comments on Exam Programming plan for today:
Tutorial 10 Programming with JavaScript
Section 17.1 Section 17.2 Add an audio file using HTML
* Lecture # 7 Instructor: Rida Noor Department of Computer Science
Tutorial 1 – Creating a Document
WEB PROGRAMMING JavaScript.
Integrating JavaScript and HTML
PHP.
Tutorial 10 Programming with JavaScript
JavaScript: Introduction to Scripting
Presentation transcript:

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

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

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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 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.

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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)

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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(); }

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

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

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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.

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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:

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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"

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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;

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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.

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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.

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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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);

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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);

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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);

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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.

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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.

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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);

© Copyright 2012 Hidaya Trust (Pakistan) ● A Non-Profit Organization ● / 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

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