Registration form with jquery validation

Bron Technology

2020-03-05

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.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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Register</h1>

<p>Please fill in this form to create an account.</p>

<label for="email"><b>Email</b></label>

<label for="mobile"><b>Mobile No</b></label>

<label for="psw"><b>Password</b></label>

<label for="psw-repeat"><b>Confirm Password</b></label>

<hr>

</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;
}

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;       
}

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:-

 &lt;label for="mobile"&gt;&lt;b&gt;Mobile No&lt;/b&gt;&lt;/label&gt;     &lt;input type="text" placeholder="Enter Mobile Number" id="phone" name="mobile"&gt; &lt;p id="developerguidance"&gt;&lt;/p&gt;

1	<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("&lt;p style='color:red;'&gt; please         enter digits only &lt;/p&gt;"); 

        }

        else if(phone.length!=10)
        {
 $("#developerguidance").html("&lt;p style='color:yellow;'&gt; invalid mobile number  &lt;/p&gt;"); 
        }
        else
        {
 $("#developerguidance").html("&lt;p style='color:green;'&gt;valid mobile number  &lt;/p&gt;");  
        }

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

}