Now in this tutorial, we make you to learn how to create the registration form with jquery validation
We have created a simple HTML form which have the fields like Name , Email, Mobile No, Password and Confirm Password.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="registration.js"></script>
</head>
<body>
<div class="developers_guidance">
<form name="myform" method="post" action="" onsubmit="return validateform()">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr><label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" id='txtEmail'>
<label for="mobile"><b>Mobile No</b></label>
<input type="text" placeholder="Enter Mobile Number" id="phone" name="mobile">
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="pwd">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="conpwd">
<hr>
<input type="submit" value="register" onclick='Javascript:checkEmail();'/>
</div>
</form>
</div>
</body>
</html>Here the style which is required for styling the form as per you need
CSS File: style.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #74B0F7;
}
* {
box-sizing: border-box;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.developers_guidance{
max-width:500px;
margin:auto;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}JQuery File: registration.js
You can call the script inline and in seperate file.
function validateform(){
var name=document.myform.name.value;
var psw=document.myform.psw.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(psw.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
var phone=document.getElementById("phone").value;
if(isNaN(phone))
{
alert("please enter digits only");
}
else if(phone.length!=10)
{
alert("invalid mobile number");
}
else
{
confirm("hello your mobile number is" +" "+phone);
}
var password = document.getElementById("pwd").value;
var confirmPassword = document.getElementById("conpwd").value;
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
return true;
}
I am using the alert in validation you can also use $(“#developerguidance”).html(“<p style=’color:green;’>Valid URL</p>”); In this you can pass id where you wnat to show alert.
AS Example show in Mobile No feild as shwon below:-
<label for="mobile"><b>Mobile No</b></label> <input type="text" placeholder="Enter Mobile Number" id="phone" name="mobile"> <p id="developerguidance"></p>
var phone=document.getElementById("phone").value;
if(isNaN(phone))
{
$("#developerguidance").html("<p style='color:red;'> please enter digits only </p>");
}
else if(phone.length!=10)
{
$("#developerguidance").html("<p style='color:yellow;'> invalid mobile number </p>");
}
else
{
$("#developerguidance").html("<p style='color:green;'>valid mobile number </p>");
}
Leave a reply
The Rubik theme is the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. It’s never been easier to build a standout website.
