Javascript form validation
JavaScript Form Validation
It is important to validate the form submitted by the user because it can
have inappropriate values. So, validation is must to authenticate user.
JavaScript provides facility to validate the form on the client-side so data
processing will be faster than server-side validation. Most of the web
developers prefer JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile
numbers and more fields.
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.
Validate.html
<html>
<head>
<script>
function validateform()
{
var name=document.f1.name.value;
var password=document.f1.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>
</head>
<body>
<form name="f1" action="abc.php" method="post"
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>
abc.php
<?php
echo $name=$_POST['name'];
echo "<br>";
echo $pass=$_POST['password'];
?>
JavaScript Retype Password Validation
<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>
<form name="f1" 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.
<html>
<head>
<script type="text/javascript">
function validate()
{
var num=document.f1.num.value;
if (isNaN(num))
{
document.getElementById("numloc").innerHTML="Enter
Numeric value only";
return false;
}
else
{
return true;
}
}
</script>
<form name="f1" onsubmit="return validate()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password"
name="password2"/><br/>
Number: <input type="text" name="num"><span
id="numloc"></span><br/>
<input type="submit">
</form>
</body>
</html>
JavaScript email validation
We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate the email id such
as:
o email id must contain the @ and . character
o @ not in first posotion
o There must be at least two characters after . (dot).
Let's see the simple example to validate the email field.
<html>
<head>
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
document.write(atposition);
var dotposition=x.lastIndexOf(".");
document.write(dotposition);
if (atposition<1 || dotposition<x.length-2)
{
alert("Please enter a valid e-mail address \n
atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
</head>
<body>
<form name="myform" method="get" action="#"
onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
