Registration form with jquery validation

Written by
  • 7 days ago

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.

Registration form with jquery validation

Registration.php

<!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>");  
        }

Article Categories:
Jquery · Php

Leave a Reply

Your email address will not be published.