Web Technologies

Form Validation using JavaScript

 Today’s Lecture
• Form Validation using JavaScript
• Client-Side Validation Approaches
– HTML Built-in Form Validation
– JavaScript Based Validation
• Regular Expressions
 Form Validation
• It’s the process to analyze the validity of data client had entered in
different form elements.
• It performs two functions:
– Basic Data Validation: form must be checked to make sure all
required fields are filled in.
– Data Format Validation: data that is entered must be checked for
correct form and value.
• Validation can happen in two places:
– In the browser using JavaScript (Client-Side).
– On the server using one of several languages such as PHP (Server-
Side).
• Client-Side validation is preferred due to following reasons:
– It‘s quicker for user; because form doesn’t need to be sent to the
server, processed, and returned to the user with any relevant error
messages.
– It saves load on the server; because some errors will get caught
before the form is submitted.
Different Types of Client-Side Validation
• Client-Side validation can be categorized into two types:
– Built-in Form Validation
• It uses HTML5 form validation features.
• Example: required attribute.
– JavaScript validation is coded using JavaScript.
• This validation is completely customizable.
• Example: write own JavaScript validation file (JSValidate.js)
 Built-in Form Validation
• required Attribute
– Simplest HTML5 validation feature is the required attribute.
– required attribute specifies that an input field must be filled out
before submitting form.
– required attribute works with input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and file.
– It also works on <select> and <textarea> elements.
 Built-in Form Validation
• min and max Attributes
– input min and max attributes specifies minimum and maximum
range of an input field.
– If field contains a value outside this range, it will automatically
generate an error.
– min and max attributes work with input types: number, range,
date, datetime-local, month, time and week.
 Built-in Form Validation
• pattern Attribute
– input pattern attribute specifies a regular expression that input
field's value is checked against, when the form is submitted.
– pattern attribute works with input types: text, date, search, url,
password , tel, and email.
 Built-in Form Validation
• type Attribute
– type="email" used for input field that contain an email address.
– type="url" used for input field that contain URL.
 Validating Forms using JavaScript
• We use JavaScript if we want to take control over the look and feel
of native error messages or to deal with legacy browsers that don’t
support HTML's built-in form validation.
• When user presses submit button on a form, it triggers onsubmit
event handler on the <form> element.
– This calls a validation function stored either in a separate script
or in the head of the document.
– Function must then return true for the form to be sent.
– Or if an error is encountered, the function returns false and the
user’s form will not be sent, and form should indicate to the
user where there is a problem with the information the user
entered.
Basic Data Validation
HTML Form

Error Message Display

 Regular Expressions
• It’s a sequence of characters that forms a search pattern.
– When we search for data in a text, we can use this search
pattern to describe what we are searching for.
• It can be a single character, or a more complicated pattern.
• It can be used to perform all types of text search and text replace
operations.
• Using String Methods
– In JavaScript, regular expressions are often used with the two
string methods: search() and replace().
– search() method uses an expression to search for a match and
returns the position of the match.
– replace() method returns a modified string where the pattern is
replaced.
 Regular Expressions
• Regular Expressions Modifiers
Modifier Description
i Perform case-insensitive matching
Perform a global match (find all matches rather than stopping
g
after the first match)
m Perform multiline matching

• Regular Expressions Patterns

– Brackets are used to find a range of characters.
Modifier Description
[abc] Find any of the characters between the brackets
[0-9] Find any of the digits between the brackets
(x|y) Find any of the alternatives separated with |
 Regular Expressions
• Regular Expressions Patterns
– Metacharacters are characters with a special meaning.
Metacharacter Description
\d Find a digit
\s Find a whitespace character
Find a match at the beginning of a word like this: \
\b
bWORD, or at the end of a word like this: WORD\b
Find the Unicode character specified by the hexadecimal
\uxxxx number xxxx

– Quantifiers define quantities.

Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
 Regular Expressions
• Using the RegExp Object
o In JavaScript, RegExp object is a regular expression object with
predefined properties and methods.
 Summary of Today’s Lecture
• Form Validation using JavaScript
• Client-Side Validation Approaches
– HTML Built-in Form Validation
– JavaScript Based Validation
• Regular Expressions
 Resources
• Chapter 12 from Beginning HTML, XHTML, CSS and JavaScript By John
Duckett(4th Edition)
• https://www.tutorialrepublic.com/javascript-tutorial/javascript-form-
validation.php
• https://www.w3schools.com/js/js_validation.asp
• https://www.w3schools.com/js/js_regexp.asp