Scribd
Upload
246 views5 pages

Javascript Form Validation Example

This document provides examples of validating different form fields with JavaScript: 1) A name field cannot be empty and a password must be at least 6 characters. This is validated on form submit. 2) A retyped password is validated to match the original password. 3) A number field is validated to only allow numeric input using the isNaN() function. 4) Email validation uses a regular expression to validate the standard email format.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
246 views5 pages

Javascript Form Validation Example

This document provides examples of validating different form fields with JavaScript: 1) A name field cannot be empty and a password must be at least 6 characters. This is validated on form submit. 2) A retyped password is validated to match the original password. 3) A number field is validated to only allow numeric input using the isNaN() function. 4) Email validation uses a regular expression to validate the standard email format.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 5

JavaScript Form Validation Example

In this example, we are going to validate the name and password. The
name can’t be empty and password can’t be less than 6 characters long.

Here, we are validating the form on form submit. The user will not be
forwarded to the next page until given values are correct.

<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="# " onsubmit="return
validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

JavaScript Retype Password Validation

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
</head>
<body>
<form name="f1" action="# " onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
</body>
</html>

JavaScript Number Validation

Let's validate the textfield for numeric value only. Here, we are using
isNaN() function.

<!DOCTYPE html>
<html>
<head>
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric
value only";
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form name="myform" action="#" onsubmit="return validate()" >
Number: <input type="text" name="num"><span
id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
</body>
</html>

Validate email address using JavaScript regular expression

Here is the code to validate email address in JavaScript using regular


expression.

function validateEmail(elementValue){
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]
{2,4}$/;
return emailPattern.test(elementValue);
}
Explanation:

The argument to this method is the email address you want to validate.
In the method body we define a variable (’emailPattern’) and assign a
regular expression to it.
Email format: The regular expression for email is

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
To understand the regular expression, we will divide it into smaller
components:

/^[a-zA-Z0-9._-]+:  Means that the email address must begin with


alpha-numeric characters (both lowercase and uppercase characters are
allowed). It may have periods, underscores and hyphens.

@:   There must be a ‘@’ symbol after initial characters.

[a-zA-Z0-9.-]+: After the ‘@’ sign there must be some alpha-numeric


characters. It can also contain period (‘.’) and hyphens(‘-‘).

\.: After the second group of characters there must be a period (‘.’). This
is to separate domain and subdomain names.

[a-zA-Z]{2,4}$/: Finally, the email address must end with two to four
alphabets. Having a-z and A-Z means that both lowercase and uppercase
letters are allowed.
{2,4} indicates the minimum and maximum number of characters. This
will allow domain names with 2, 3 and 4 characters e.g.; us, tx, org,
com, net, wxyz).

On the final line we call test method for our regular expression and pass
the email address as input. If the input email address satisfies our regular
expression, ‘test’ will return true otherwise it will return false. We return
this value to the calling method.
You can call this method whenever you want to validate email address.

You might also like