0% found this document useful (0 votes)
37 views16 pages

Lecture 17

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
37 views16 pages

Lecture 17

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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

You might also like