2. INTRODUCING CLIENT SIDE VALIDATION
– Checking Empty Fields ...
– Generating Alerts For Invalid Data …
– Practice And Assignments …
muhammadabaloch
3. INTRODUCING CLIENT SIDE VALIDATION
– 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
4. INTRODUCING CLIENT SIDE VALIDATION
– 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
5. 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
6. 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
7. 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
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
16. HOW TO CREATE PATTERNS (Continued…..)
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);
– It will accept only numbers between 0 to 9 or only numeric
characters, having minimum length of 1.
muhammadabaloch
17. 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
18. 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
19. 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
20. 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
21. 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 )
Parameter Description
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
22. 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
23. 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.
Parameter Description
regexp Required. The value to search for, as a
regular expression.
muhammadabaloch
24. STRING OBJECT METHOD (match())
<script language="javascript" type="text/javascript">
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
25. STRING OBJECT METHOD (match())
<script language="javascript" type="text/javascript">
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
26. STRING OBJECT METHOD (match())
<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 = 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
27. 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)
Parameter Description
searchvalue Required. The value, or regular
expression, to search for.
muhammadabaloch
28. STRING OBJECT METHOD (search())
– The return type is integer.
var str=“Hidaya Trust!";
var n=str.search(“Trust");
– The result of n will be:
– 7
muhammadabaloch
29. STRING OBJECT METHOD (search())
<script language="javascript" type="text/javascript">
var str="Mr Blue has a blue house and a blue car";
var result=str.search(/blue/g);
document.write(result);
</script>
muhammadabaloch
30. 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