How to create validation registration form using Javascript
In this tutorial, I show you how to create validation registration form using javascript.As you know, validations are very necessary so that end users can not entered wrong or blank details.you can put validations on phone numbers,passwords,emails and on many more.
Steps to create validation registration form using javascript :
- Create a file, write the following code and save it as validations.html.
<html>
<title>
Javascript validaton
</title>
<script>
function valid()
{
var name=document.getElementById("name").value;
var email=document.getElementById("email").value;
var pass=document.getElementById("password").value;
var pass_2=document.getElementById("pass_1").value;
var phone_1=document.getElementById("phone").value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if(name=='')
{
alert('Enter the name');
name.focus;
return false;
}
if(email=='')
{
alert('Enter the Email')
email.focus;
return false;
}
if (email==''|| atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert('Enter the corect email');
email.focus
return false;
}
if(pass=='')
{
alert('Fill the password');
password.focus;
return false;
}
if(pass!='')
{
if(password.length<8)
{
alert('Password should contain 8 or max')
password.focus;
return false;
}
re = /[0-9]/;
if(!re.test(password.value))
{
alert('Please enter numeric values');
password.focus;
return false;
}
re = /[a-z]/;
if(!re.test(password.value))
{
alert('Please enter lowercase values');
password.focus;
return false;
}
re = /[A-Z]/;
if(!re.test(password.value))
{
alert('Please enter uppercase values');
password.focus;
return false;
}
}
if(pass_2=='')
{
alert('Fill the password');
password.focus;
return false;
}
if(!pass_2=='')
{
if(password.value!=pass_1.value)
{
alert('Password is not matched');
return false;
}
}
if(phone_1=='')
{
alert('Enter the phone');
phone.focus;
return false;
}
if(!phone_1=='')
{
var phoneno = /^\d{10}$/;
if(!phone.value.match(phoneno))
{
alert('Please enter numeric values');
password.focus;
return false;
}
}
}
</script>
<body bgcolor="black">
<table height="300px" width="200px" bgcolor="yellow" align="center" style="border-radius:5px">
<tr>
<td>
<h2 align="center">Registration</h2>
</td>
</tr>
<tr>
<td align="center">
<form onsubmit="return valid();">
Name : <input type="text" placeholder="enter the name" id="name"/><br>
Email : <input type="text" placeholder="abc@gmail.com" id="email"/><br>
Password : <input type="password" placeholder="*******" id="password"/><br>
Confirm Password : <input type="password" placeholder="*******" id="pass_1"/><br>
Phone : <input type="text" placeholder="1234567890" id="phone"/><br><br>
<input type="submit" value="submit" id="submit"><br>
</form>
</td>
</tr>
</table>
</body>
</html>
{[['
']]}
']]}
No comments