O-LEVEL-M2-R5 UNIT-3

HTML BASICS
HTML TAGS
(Forms)
(Form Validation)
 Form Validation

•required attribute
•pattern attribute
Forms
• HTML forms are a way to make an interactive website
• We created a form using <form> tag and its attributes
• Various types of form input attributes used with input type
• Input=“text”
• Input=“password”
• <textarea rows=“..” cols=“..”
• Input type=“radio”
• Input type=“checkbox”
• <select name=“box_name” >
<option….></option>
• Input type=“submit”
• Input type=“reset”
• Input type=“button”
• Input type=“image”
• Now we will learn to put validation checks when value typed in
forms
What is Form Validation
• When the data is entered the browser and/or the web
server check to see that the data is in the correct format
and within the constraints set by the application. This is
called form validation.
• Validation done in the browser is called client-
side validation, while validation done on the server is
called server-side validation.
• Now we will study various attributes form clien-side
validation.
Client Side Validation
• When a form is filled and before the data is submitted to
the server, it is important to ensure that all the form
controls are filled out and in correct format
• This is called client-side form validation, and helps
ensure data submitted matches the requirements set forth
in the various form controls.
• If the information is correctly formatted, the application
allows the data to be submitted to the server and (usually)
saved in a database; if the information isn't correctly
formatted, it gives the user an error message explaining
what needs to be corrected, and lets them try again.
• Client-side validation is an initial check and an important
feature of good user experience
• By catching invalid data on the client-side, the user can
fix it straight away.
• If it gets to the server and is then rejected, a noticeable
delay is caused by a round trip to the server and then
back to the client-side to tell the user to fix their data.
• Client-side validation is not an exhaustive security
measure and security checks on any form-submitted data
must be done on the server-side also.
• Client-side validation is too easy to bypass, so malicious
users can still easily send bad data through to your
server.
Error Messages Displayed
• When client-side form validation is done some of the
messages that are displayed are as follows :
• "This field is required" (You can't leave this field blank).
• "Please enter your phone number in the format xxx-xxxx" (A
specific data format is required for it to be considered valid).
• "Please enter a valid email address" (the data you entered is not in
the right format).
• "Your password needs to be between 8 and 30 characters long and
contain one uppercase letter, one symbol, and a number." (A very
specific data format is required for your data).
Need For Client Side Validation
• We want to get the right data, in the right format. Our
applications won't work properly if our users' data is
stored in the wrong format, is incorrect, or is omitted
altogether.
• We want to protect our users' data. Forcing our users to
enter secure passwords makes it easier to protect their
account information.
• We want to protect ourselves. There are many ways
that malicious users can misuse unprotected forms to
damage the application
Types of Client-Side Validation
• There are two types of client-side validation
• Built-in form validation
• It uses HTML5 form validation features.
• This type of validation generally doesn't require much JavaScript.
• Built-in form validation has better performance than JavaScript, but it is
not as customizable as JavaScript validation.
• JavaScript validation
• It is coded using JavaScript. This validation is completely customizable,
but you need to create it all (or use a library).
We will learn Built-in Form
Validation
Built-in Form Validation
• The ability to validate form data without relying on
Javascript is one of the most significant features
of HTML5 form control
• This is done by using validation attributes on form
elements. Some of the attributes are :
• required
• minlength and maxlength
• min and max
• type
• pattern
1. required attribute
• Required
• The “required” attribute is the simplest HTML5 validation feature
• Specifies whether a form field needs to be filled in before the form
can be submitted.
• This attribute is added to the element to make an input mandatory
• When this attribute is set, the element matches the :required UI
pseudo-class and the form won't submit, displaying an error
message on submission when the input is empty.
• While empty, the input will also be considered invalid, matching
the :invalid UI pseudo-class.
Syntax for required
• Syntax:
Name: <input type=“text” required>
Example using required attribute
• Example:
• Create Username and password form where username should not
be left blank i.e. the required attribute
• If the username field is left blank the message “Please fill out this
field” will be displayed
Example: save as form-val-reqd.html
<!DOCTYPE html>
<html>

<head>
<title>
Example of required Attribute Form Validation
</title>
</head>
example continue….
<body>
<h1>Registration Form</h1>
<h2> HTML input required attribute
</h2>
<form action="">
Username: <input type="text“ name="usrname“ required>
<br>
Password: <input type="password“ name="password">
<br>
<input type="submit">
</form>
</body>

</html>
Output of required attribute: Left the
username blank
Try Example: save as form-val-reqd2.html
<!DOCTYPE html>
<html>

<head>
<title>
Required Attribute
</title>
</head>
<body>
<h1>Form Validation</h1>
<h2>
HTML input required attribute
</h2>
<form action="">
Required Field: <input type="radio“ name="radiocheck“
required>
<br>
<input type="submit">
</form>

</body>
</html>
Output of form-val-reqd2.html when radio button not
selected and pressed submit(? With form name)
Output of form-val-reqd2.html when radio button
selected and pressed submit (radiocheck=“on”)
2. pattern attribute
• pattern
• Specifies a regular expression that defines a pattern the entered
data needs to follow.
• This attribute expects a ”Regular Expression” as its value.
• A regular expression (regex) is a pattern that can be used to match
character combinations in text strings
• “regexs” are ideal for form validation and serve a variety of other
uses in JavaScript.
• These regular expressions are used to put a check to the type of
input that is to be entered.
• For example: like in password we limit the minimum length of the
password, first character should be alphabet or only alphabets and
numbers are allowed in the password etc.
• The pattern attribute specifies a regular expression that
the <input> element's value is checked against on form
submission.
• A regular expression is a formalized string of characters
that define a pattern.
• For example [a-zA-Z0-9]+ is a pattern that matches against a string
of any length, as long as the string contains only lowercase letters
(a-z), uppercase letters (A-Z), or numerals (0-9).
• Syntax:
• Password : <input type=“text” pattern=“regexp”>
Examples of regular expression
• a
• Matches one character that is a (not b, not aa, and so on).
• Abc
• Matches a, followed by b, followed by c.
• ab?c
• Matches a, optionally followed by a single b, followed by c. ( ac or abc)
• ab*c
• Matches a, optionally followed by any number of bs, followed by c.
( ac , abc, abbbbbc, and so on).
• a|b
• Matches one character that is a or b.
• abc|xyz
• Matches exactly abc or exactly xyz (but not abcxyz or a or y, and so
on).
Example: save as form-val-pattern.html(3 letter
password having lowercase or uppercase
alphabets
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>
</head>
<body>
<h1>Example of Pattern Attribute</h1>
<h2>password</h2>
<form action="">
Password: <input type="text"
name="Password"
pattern="[A-Za-z]{3}" title="3 letter Password">
<input type="submit">
</form>
</body>
</html>
Output when numbers are given
Output when more than 3 letters are given
Output when less than 3 letters are given
Example: pattern1.html(To accept yes or
no)
<!DOCTYPE html>
<html>
<head>
<title>pattern attribute</title>
</head>
<body>
<h1>Example of Pattern Attribute</h1>
<h2> Enter YES/NO </h2>
<form>
Enter Option: <input name=“option” pattern="[YES]|[NO]">
<button>Submit</button>
</form>
</body>
</html>
Output error as “yes” is typed
Output: error as “no” is typed
Output when “YES or NO” entered:
Submit Button Clicked(No error shown)