form validation client side

FORM VALIDATION client side validation

INTRODUCING CLIENT SIDE VALIDATION

– Checking Empty Fields ...

– Generating Alerts For Invalid Data …

– Practice And Assignments …

muhammadabaloch


– 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.

muhammadabaloch


– 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 round-trip 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.

muhammadabaloch

ENABLE JAVASCRIPT

• Google Chrome

– Click the wrench icon on the browser toolbar.

– Select Options

– then click Settings.

– 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)muhammadabaloch

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.

muhammadabaloch

CHECKING EMPTY FIELDS

<head><script language=“javascript” type=“text/javascript”>

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();

}

muhammadabaloch

CHECKING EMPTY FIELDS

else{

document.myform.submit();}

}</script></head>

<html><body><form action=“process.php” method=“post” name=“myform”>

<table><tr><td><input type=“text” name=“txtName”></td><td id=“txtNameMsg”></td></tr><tr><td><input type=“text” name=“txtLName”></td><td id=“txtLNameMsg”></td></tr><tr><td><input type=“button” name=“btn” value=“Submit”></td></tr>

</table></form></body>

</html>

muhammadabaloch

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:

muhammadabaloch

REGULAR EXPRESSIONS

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.

muhammadabaloch

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

muhammadabaloch

REGULAR EXPRESSIONS (Metacharacters)

Metacharacter Description\w Finds word character i.e. (alphabets

and number)

\W Finds non-word character i.e. (Special Characters)

\d Finds digit i.e. (Numbers)

\D Finds non-digit character i.e. (alphabets and Special Characters)

muhammadabaloch

http://www.w3schools.com/jsref/jsref_regexp_wordchar.asp

http://www.w3schools.com/jsref/jsref_regexp_wordchar_non.asp

http://www.w3schools.com/jsref/jsref_regexp_digit.asp

http://www.w3schools.com/jsref/jsref_regexp_digit_non.asp

REGULAR EXPRESSIONS (Pattern Switches or Modifiers)

– use switches to make the match global or case- insensitive or both:– Switches are added to the very end of a regular expression.

Property Description Example

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"

muhammadabaloch

REGULAR EXPRESSIONS (JavaScript RegExp Object )

• 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;

muhammadabaloch

HOW TO CREATE PATTERNS

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);

– It will accept only a to z alphabets or only alpha numeric characters, having minimum length of 1.

muhammadabaloch

HOW TO CREATE PATTERNS (Continued…..)

var pattern = new RegExp(/^[0-9]{1,}$/);or

var pattern = /^[0-9]{1,}$/;var pattern = new RegExp(pattern);

orvar pattern = new RegExp(“^[0-9]{1,}$”);

or var pattern = “^[0-9]{1,}$”;var pattern = new RegExp(pattern);

– It will accept only numbers between 0 to 9 or only numeric characters, having minimum length of 1.

muhammadabaloch

RegExp OBJECT METHOD ( test() )

– 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)

Parameter Description

string Required. The string to be searched

muhammadabaloch

RegExp OBJECT METHOD ( test() )

<script type="text/javascript">var str="Hello world!";var patt=/Hello/g;var result=patt.test(str);document.write("Returned value: " + result);

</script>

<script type="text/javascript">var pattern =new RegExp(/^[a-z]{1,}$/);var string = "hello world";var result = pattern.test(string);document.write("The result = "+ result);

</script>

muhammadabaloch

RegExp OBJECT METHOD (exec() )

– Executes 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)Parameter Description

string Required. The string to be searched

muhammadabaloch

RegExp OBJECT METHOD (exec() )

<script type="text/javascript">var str="Hello world!";var patt=/Hello/g;var result=patt.exec(str);document.write("Returned value: " + result);

</script>

<script language="javascript" type="text/javascript">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);

</script>

muhammadabaloch

STRING OBJECT METHOD (replace())

– 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 )


searchvalue Required. The value, or regular expression, that will be replaced by the new value

newvalue Required. The value to replace the searchvalue with

muhammadabaloch

STRING OBJECT METHOD (replace())

<script language="javascript" type="text/javascript">

var str="Mr Blue has a blue house and a blue car";

var n=str.replace(/blue/g,"red");

document.write(n);

</script>

muhammadabaloch

STRING OBJECT METHOD (match())

– 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.


regexp Required. The value to search for, as a regular expression.

muhammadabaloch



var str="The rain in SPAIN stays mainly in the plain";

var result=str.match(/ain/gi);

document.write("The result = "+ result);

</script>

• The result of n will be:• ain,AIN,ain,ain

muhammadabaloch



var pattern = new RegExp(/ain/gi);var result = str.match(pattern);document.write("The result = "+ result);

</script>

The result of n will be:ain,AIN,ain,ain

muhammadabaloch



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);

</script>

– The result of n will be:– The,rain,in,SPAIN,stays,mainly,in,the,plain

muhammadabaloch

STRING OBJECT METHOD (search())

– 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)


searchvalue Required. The value, or regular expression, to search for.

muhammadabaloch


– The return type is integer.

var str=“Hidaya Trust!";var n=str.search(“Trust");

– The result of n will be:– 7

muhammadabaloch



var str="Mr Blue has a blue house and a blue car";

var result=str.search(/blue/g);

document.write(result);

</script>

muhammadabaloch

ASSIGNMENT

Submit

First Name

Last Name

CNIC #

Enter Last NameEnter Name

Enter CNIC number

Invalid Format, Only alpha numeric characters are alowed

Please fill the field

muhammadabaloch

OUTPUT

muhammadabaloch

form validation client side

Education