LAB 04 – JAVASCRIPT (CONT.

)
I/. Javascript Validation Form
1/. Regular expression in Javascript
Javascript supports regular expressions through the RegEx library.
Regular expression works according to the matching rules, and gets the result of that
match through the rules provided by the RegEx library. Based on these rules,
programmers will write expressions and apply them to their problems.
RegEx (regular expression) is a set of rules, based on these rules we will write
expressions that match between strings. This is an advanced library built into
Javascript's RegExp object.
Syntax:
/pattern/modifiers
In there:
- pattern is a Regular Expression string
- modifiers is the configuration parameter for the pattern string, and it has the
following values:
 i : match regardless of case
 g : match the entire search string
 m : matches all newline data (multiline)
In JavaScript, regular expressions are often used with the two string methods:
search() and replace().
- The search() method uses an expression to search for a match, and returns the
position of the match.
- The replace() method returns a modified string where the pattern is replaced.
Regular Expression Patterns:
a/. Brackets are used to find a range of characters:

1
b/. Metacharacters are characters with a special meaning:

c/. Quantifiers define quantities:

2
The structure of a string always has a start character and an end character. And in
RegEx there are also some characters that help with the convention of where the
string begins and where it ends. Its structure will be as follows:
/^pattern$/
Where the ^ character is the start of the string, and the $ is the end of the string.
In JavaScript, the RegExp object is a regular expression object with predefined
properties and methods.
- Using test()
The test() method is a RegExp expression method. It searches a string for a pattern,
and returns true or false, depending on the result.
- Using exec()
The exec() method is a RegExp expression method.
It searches a string for a specified pattern, and returns the found text as an object.
If no match is found, it returns an empty (null) object.
- Use the string.match function to get the entire regex string result.
Example 01:

3
Create a form for checking Regular Expression like this:

Test:

You can try:

4
Example 02: Write regular expression
a/. Write a regular expression that checks for integers.
b/. Write a regular expression that checks for real numbers.
c/. Write a regular expression that checks the date in the format dd/mm/yyyy.
5
d/. Write a regular expression that checks landline numbers in the format (0710)
3777888.
e/. Write a regular expression that checks for a cell phone number.
f/. Write a regular expression that checks email.
You can try:
a/. p = /^[\+\-]?\d+$/
b/. p = /^[\+\-]?\d+(\.\d+)?$/
c/. p = /^\d{2}\/\d{2}\/\d{4}$/
d/. p = /^\(0\d{1,3}\)\d{7}$/
e/.
p = /^(01\d{9}|09\d{8})$/
p = /^(\(0\d{1,3}\)\d{7}|01\d{9}|09\d{8})$/
f/. p = /^[A-z0-9]+([\.\-_]\w+)*@\w+([\.\-_]\w+)*(\.\w{2,4})+$/
2/. Form Validation
It is important to validate the form submitted by the user because it can have
inappropriate values. So, validation is must to authenticate user.
JavaScript provides facility to validate the form on the client-side so data processing
will be faster than server-side validation. Most of the web developers prefer
JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile numbers
and more fields.
Example:
I have a form like this:

6
I want to validate this form like this:
- User must enter Username before submit form. If username is not entered, an alert
will show “Name can't be blank”.
- User must enter Password according to the rules: Password must be at least 6
characters long. If user enter password wrong, an alert will show “Password must be
at least 6 characters long”.
And if you validate form successfully, an html page (called validate-success.html)
will show result registration’s information. A page likes this:

How can you do that?

You can try by 2 ways:
- The first way: You can validate form by using alert dialog
+ Step 01: You need to create a form

+ Step 02: You need to create a script for validation

7
+ Step 03: You need to create an html page for validation result

8
- The second way: You can validate form by <div> tag. It will show result on html
page (below input)
Instead of alert dialog, you will create div tag below input tag for validation. You
can follow these steps:
+ Step 01: Create a form

9
+ Step 02: You need to create a script for validation

+ Step 03: Create an html page for validation result (same as above)

10
II/. Practice Javascript
I have a form like this:

I want to validate this form like this:

- User must enter Username before submit form. If username is not entered, an alert
will show “Username can't be empty”.
- User must enter Password according to the rules: Password length must be from 6
to 20 characters. If user enter password wrong, an alert will show “Password length
must be from 6 to 20 characters”.
- Please check confirm password and password are matched.
- Validate email:
There are many criteria that need to be follow to validate the email id such as:
 Email id must contain the @ and . character
 There must be at least one character before and after the @.
 There must be at least two characters after . (dot)
+ Valid emails: [email protected]
+ Invalid emails: [email protected], @abc.com, abc@abc,....
- Validate phone:

11
+ Start number must be 0
+ After 0, we must have at least 9 numbers and at most 10 numbers
When I click to submit form, I want you to validate form by 2 ways like this:
- The first way:

- The second way:

12
You can try:
- The first way:
+ Step 01: Create a form

13
+ Step 02: Style a form

14
+ Step 03: Validate form

15
16
- The second way:
+ Step 01: Create a form

17
+ Step 02: Style a form

18
+ Step 03: Validate form

19
III/. More Exercises
1/. Create a form like this:

20
Check input data:
- When clicking the Verify button, a message will be displayed telling the user
whether they have filled in the correct information or not. The notice is as follows:
+ The name field cannot be left blank.
+ The address field cannot be left blank.
+ Email field cannot be left blank.
+ The email field must be in the correct email format.
+ The age field cannot be left blank.
+ The age field can only enter integers.
+ If the entered data is complete and correct, the message: Valid data will be
displayed.
- When the Cancel button is pressed, all fields must be blank
2/. Create a form like this:

21
Check input data:
- When pressing the Process button if the form has not been filled in completely, a
message will be displayed to the user.
+ The first name field cannot be left blank.
+ The last name field cannot be left blank.
+ The address field cannot be left blank.
+ User must select at least one journal.
- If the form is completely filled out, a confirmation dialog is displayed. Magazines
(magazines) and payment method (payment) must display correctly.

22
+ If the OK button is then pressed, another message box must be displayed. Gender
(gender) and address must display correctly.

+ If the Cancel button is then clicked, the last name field will receive focus and the
user can change their selection.
- When the Reset button is pressed, all fields must be cleared.

23