Scribd
Upload
29 views5 pages

Form Validation Notes-1

The document discusses form validation techniques in JavaScript, emphasizing client-side validation to reduce server load. It covers three types of validators: required validator to check for empty inputs, length validator to ensure input meets specific length criteria, and pattern validator using regular expressions to validate formats like email addresses. Examples of each validator are provided, demonstrating their implementation in HTML and JavaScript.

Uploaded by

anfaananfu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views5 pages

Form Validation Notes-1

The document discusses form validation techniques in JavaScript, emphasizing client-side validation to reduce server load. It covers three types of validators: required validator to check for empty inputs, length validator to ensure input meets specific length criteria, and pattern validator using regular expressions to validate formats like email addresses. Examples of each validator are provided, demonstrating their implementation in HTML and JavaScript.

Uploaded by

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

FORM VALIDATION

Form validation normally used to occur at the server, after the client had entered
all the necessary data and then pressed the Submit button. If the data entered
by a client was incorrect or was simply missing, the server would have to send
all the data back to the client and request that the form be resubmitted with
correct information. This was really a lengthy process which used to put a lot
of burden on the server. JavaScript provides a way to validate form's data on
the client's computer before sending it to the Web server.
REQUIRED VALIDATOR
In JavaScript, a "required validator" is commonly used to ensure that a value
(such as a form input) is not empty or undefined. Below example program
illustrates the use of required validator. A text box will be displayed where you
should input your name. If the text box is empty, it will display an alert box
informing the user that text box is empty.
<html>
<head>
<title>Form Validation Required Validator</title>
<script>
function validate()
{
if (document.getElementById("text1").value == "")
{
alert("Text box is Empty!... Please provide your Name!");
return false;
}
var name=document.getElementById("text1").value;
document.write("You are " + name);
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return (validate())">
Enter your name : <input type="text" id="text1"> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Length Validator
A length validator in JavaScript is used to check whether a string, array, or other
data type's length meets specified criteria, such as a minimum, maximum, or
exact length. Below example program validates the length of the PIN code you
entered is the exact length.
<html>
<head>
<title>Form Validation Length Validator</title>
<script>
function validate()
{
if (document.getElementById("text1").value.length !=6)
{
alert("PIN CODE length is incorrect!... Please provide correct PIN!");
return false;
}
var pin=document.getElementById("text1").value;
document.write("Your PIN is " + pin);
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return (validate())">
Enter your PIN Code: <input type="text" id="text1"><br>
<input type="submit" value="Submit" >
</form>
</body>
</html>

Pattern Validator
A pattern validator in JavaScript is used to validate whether a value (usually a
string) matches a specific pattern defined by a Regular Expression (regex). It
is commonly used in form validation for inputs like email, phone number,
password, or other structured data. Regex (Regular Expression) is a sequence
of characters that defines a search pattern. It is commonly used for matching,
searching, and manipulating strings. Regular expressions are supported in
many programming languages, including JavaScript, Python, Java, and others,
making it a powerful tool for text processing. Below program validates the
pattern of an email using regular expression.
<html>
<head>
<title>Form Validation Pattern Validator</title>
<script>
function validate()
{
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
var email=document.getElementById("text1").value;
if(!emailRegex.test(email))
{
alert("Email is incorrect!... Please provide correct Email!");
return false;
}
document.write("Your E-mail is " + email);
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return (validate())">
Enter your Email: <input type="text" id="text1"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

IMPORTANT
Email Regex Pattern:
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
Components:
1. ^: Start of the string.
2. [a-zA-Z0-9._%+-]+: Matches one or more alphanumeric characters, dots,
underscores, percent signs, plus signs, or hyphens. This matches the local part
of the email address (before the @ symbol).
3. @: Matches the @ symbol.
4. [a-zA-Z0-9.-]+: Matches one or more alphanumeric characters, dots, or
hyphens. This matches the domain name (after the @ symbol).
5. .(dot): Matches a period (.) character. This separates the domain name from
the top-level domain.
6. [a-zA-Z]{2,}: Matches the top-level domain (it must be at least 2 characters
long, and can only contain letters).
7. $: End of the string.
What it matches:
This regex pattern matches most common email address formats, including:
- [email protected]
- [email protected]
- [email protected]
- [email protected]
However, it may not match some more exotic or non-standard email address
formats.
Note:
This regex pattern does not validate whether the email address actually exists
or is in use. It only checks if the format is correct.

You might also like