Developer Guidance
Developer Guidance
Categories
Jquery Php

Registration form with jquery validation

Sharing is caring!

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
{{urvanov-syntax-highlighter-internal:0}}
</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

JQuery File:  registration.js

You can call the script inline and in seperate file.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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:-

1
&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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;");  
        }

Leave a Reply

Your email address will not be published. Required fields are marked *