UNIT - 4
Form Validation
STME, NMIMS, Navi Mumbai
Form Validation
• Validation is a process of checking the input values whether they are
correct or not.
• For example:
• First Name can’t be blank
• First Name can contain only alphabets
• Email should be in correct format
• Amount should be in between 100 to 1000.
• Password can be 8 maxlength.
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Color coding the required
• Name, Email, Age, Create ID is required to be
filled.
STME, NMIMS, Navi Mumbai
Min and max to create range of attributes.
• The attributes works with the following input types: number, range,
date, datetime, datetime-local, month, time and week.
STME, NMIMS, Navi Mumbai
Pattern in Input
• This attributes helps the developer to specify a JavaScript regular
expression for the field’s value to be checked against.
• Hence we can use pattern to implement specific validation like phone
number, product code, zip code etc.
• The pattern attribute works with the following input types: text,
search, url, tel, email, and password.
STME, NMIMS, Navi Mumbai
Pattern
STME, NMIMS, Navi Mumbai
Using regular expressions
• Regular expressions give you much more power to handle strings in a script.
• They allow to form patterns that can be matched against strings, rather than trying
to use the String object’s methods, which may make it more difficult to be precise.
• For example, you may want to know whether the value entered in a text box for an
e-mail address included at least one character at the beginning, followed by an at
(@) symbol, followed by at least one character, followed by a dot (.), followed by
at least two more characters (matching a traditional e-mail address like
[email protected] or the shortest type of email address
[email protected]).
STME, NMIMS, Navi Mumbai
Creating regular Expressions
• Example
STME, NMIMS, Navi Mumbai
Test regular Expression
• Example
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Adding Flags
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Regex Examples
• Test a non decimal number
• Test Alphabet
• Check 6 digit Pincode
• Check number followed by alphabet
• Check email ID
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Name validation
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Validation check for non empty string
STME, NMIMS, Navi Mumbai
Activity
STME, NMIMS, Navi Mumbai
To display number of elements in forms on
HTML page
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
Using Form Names
STME, NMIMS, Navi Mumbai
Using an ID
STME, NMIMS, Navi Mumbai
Using Properties and Methods of Form object
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai
STME, NMIMS, Navi Mumbai