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

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,}$/;
or
var pattern = new RegExp(“^[0-9]{1,}$”);
or
var pattern = “^[0-9]{1,}$”;
– 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>
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)
string Required. The string to be searched
muhammadabaloch

RegExp OBJECT METHOD (exec() )
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);
</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())
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);
</script>
• The result of n will be:
• ain,AIN,ain,ain
muhammadabaloch

var pattern = new RegExp(/ain/gi);
var result = str.match(pattern);
</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);
</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 Name
Enter Name
Enter CNIC
number
Invalid Format, Only alpha
numeric characters are alowed
Please fill the
field
muhammadabaloch

Form validation client side

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Form validation client side (20)

More from Mudasir Syed (20)

Recently uploaded (20)

Form validation client side