Registration form with jquery validation

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

By worldwideclassifieds

Globaladsposting.com is one of the top websites publishing global free classifieds ads. This website can help you reach more potential customers or B2B partners if you are looking for one.

March 5, 2020 4:49 pm