Here in this tutorial, we make you learn how to create simple registration form with proper validation using jQuery and database connectivity using PHP.
We have created a simple HTML form with four fields- Name, Email, Password., and Confirm Password.  There is a jQuery function for complete validation and user data get inserted through PHP script.
Before inserting into database, sanitization and validation on email is done using PHP. Also, user input email get checked into database for it’s existence, if it exist then, user must enter another email.
You can download our zip file or simply follow our code and edit it to use.
-:See Also:-
HTML File:Â registration.html
Given below our complete HTML code , copy to use it.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>Create Registration Form Using jQuery</h2>
<label>Name :</label>
<input type="text" name="dname" id="name">
<label>Email :</label>
<input type="text" name="demail" id="email">
<label>Password :</label>
<input type="password" name="password" id="password">
<label>Confirm Password :</label>
<input type="password" name="cpassword" id="cpassword">
<input type="button" name="register" id="register" value="Register">
</form>
</div>
</body>
</html>
jQuery File:Â Â registration.js
Given below our complete jQuery code.
$(document).ready(function() {
$("#register").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var cpassword = $("#cpassword").val();
if (name == '' || email == '' || password == '' || cpassword == '') {
alert("Please fill all fields...!!!!!!");
} else if ((password.length) < 8) {
alert("Password should atleast 8 character in length...!!!!!!");
} else if (!(password).match(cpassword)) {
alert("Your passwords don't match. Try again?");
} else {
$.post("register.php", {
name1: name,
email1: email,
password1: password
}, function(data) {
if (data == 'You have Successfully Registered.....') {
$("form")[0].reset();
}
alert(data);
});
}
});
});
PHP Script: register.php
Below script executes for inserting data into database.
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing connection with server..
$db = mysql_select_db("college", $connection); // Selecting Database.
$name=$_POST['name1']; // Fetching Values from URL.
$email=$_POST['email1'];
$password= sha1($_POST['password1']); // Password Encryption, If you like you can also leave sha1.
// Check if e-mail address syntax is valid or not
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing email(Remove unexpected symbol like <,>,?,#,!, etc.)
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "Invalid Email.......";
}else{
$result = mysql_query("SELECT * FROM registration WHERE email='$email'");
$data = mysql_num_rows($result);
if(($data)==0){
$query = mysql_query("insert into registration(name, email, password) values ('$name', '$email', '$password')"); // Insert query
if($query){
echo "You have Successfully Registered.....";
}else
{
echo "Error....!!";
}
}else{
echo "This email is already registered, Please try another email...";
}
}
mysql_close ($connection);
?>
My SQL Code Segment:
To create database and table, execute following codes in your My SQL .
CREATE DATABASE college;
CREATE TABLE registration(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
PRIMARY KEY (id)
)
CSSÂ File:Â style.css
Styling HTML Elements.
/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
h2{
text-align: center;
font-size: 24px;
}
hr{
margin-bottom: 30px;
}
div.container{
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 55px 40px;
background-color: rgba(187, 255, 184, 0.65);
border: 15px solid white;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
input[type=text],[type=password] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px #00F5FF;
border: 2px solid #00F5FF;
color: #4f4f4f;
font-size: 16px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#register {
font-size: 20px;
margin-top: 15px;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text-shadow: 0px 1px 0px #13506D;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
#register:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}
Conclusion:
This was all about to create simple registration form with validation and database connectitvity.  Hope you like it, Keep reading our other blogs.
You may also like –
41 Replies to “Create Simple Registration Form Using jQuery”
Thanks alot, but i have an issue redirecting it to a thank you page after successful registration. Thanks.
Hey Russ,
Pleased with your appreciation !!!!!
Keep reading our other blog posts to learn more .
Thanks & Regards,
Swapnil Gupta,
FormGet.com
Create/setup database for the project, your problem will automatically solve.
this form really help me.thanks a lot.very good.keep it up.
Hello Dilawar,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Regards,
FormGet Team
Its Not Working
its good
Hello Vishal,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Regards,
FormGet Team
I would like to said that try to show up more code than this one and i said thank for your help
Hello Steven,
Pleased to have readers like you !
Keep visiting in future too.
Regards,
FormGet Team.
Hello Conf..,
That sounds really great ! Keep reading our other blog posts for getting more coding tricks.
Regards,
FormGet Team
hi..thx for sharing..but why did u use mysql instead of mysqli ..id like to focus on mysqli..keep keep sharing ur project using mysqli ..thnaks mate god bless u and all developers
i have increased three more labels/fields in the form and done editing in js and php file the only problem is that how and where we can create database and how to connect with this form.
thank you. i ll need private guiding. so give me contact mail address for that.
Thank’s for help.
I want also apply validation for name and age and image and contact no…….plz help me
the register button not working please help me please
and how to add php file in html application
it helps a lot me
The MySQL part doesn’t work for me
Error: http://prntscr.com/65l18v
I hope someone can help
I have added the js file into the script.But it’s not working! please help me!
hi adm
the creation of form is fantastic my only worry is that i have not been able to connect to the database . im current using wampserver please help
Register button doesn’t work! Please help me out.
Nice example of registraion form with jquery.i realy like it.thank you for this.
yeah! thats great post. Now i learn how to make a registration form. as your shareing content. thanks for share with us.
This was very useful indeed. Worked perfectly after using my own database information. I just have one question and hope you could help me with the answer. I tried changing the messages but the mail one and the success one don’t seem to change. Can you help me with this one?
Thanks
Never mind my ignorance, got it fixed. Was making the changes on the wrong file.
Register button not working. Hope you can do something with this. Help me pls. Thank you for this code! 🙂
oh ….very usefull toturial.thank you very much admin…
Really,this pages coding very helpful for site and developed.
When i click register this code also coming…
( ! ) Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:wampwwwregistration_jqueryregister.php on line 3
Call Stack
#TimeMemoryFunctionLocation
10.0010138192{main}( )..register.php:0
20.0010138376mysql_connect
( )..register.php:3
How can i disable all the text boxes of the form after submitting data…
local host email confirmation on submit how can configuration in xamp
It is not my first time to pay a visit this web site, i am visiting this web
page dailly and take pleasant information from here all the time.
I really learned some thing ! its a easy and wonderful jquery tutorial many many thanks for sharing ,
hello everyone,
When I downloaded these files, to try, after to run it gives this error “fatal error: uncaught error: call to undefined function mysql_connect() in c:\xampp\htdocs\test\register.php:2 stack trace: #0 {main} thrown in c:\xampp\htdocs\test\register.php on line 2″
in”php.ini” I wrote :
extension_dir = “./”
extension_dir = “C:\xampp\php\ext”
extension=php_mysql.dll
but this error it’s coming out again! why?
Thanks
I’m extremely pleased to discover this website. I wanted to
thank you for ones time just for this fantastic read!! I definitely
really liked every bit of it and i also have you book-marked to see new things on your web site.
This is the perfect site for anyone who really wants to find out about this topic.
You realize a whole lot its almost tough to argue with you (not that I personally would want to…HaHa).
You certainly put a brand new spin on a topic which has
been discussed for years. Wonderful stuff, just excellent!
If you are going for finest contents likke I do,
simply go to see this web site every day because it provides feature
contents, thanks
Hi, of course this paragraph is in fact pleasant and
I have learned lot of things from it regarding blogging.
thanks.
my web page Pagar BRC
This is great!
Thanks for finally talking about > Create Simple Registration Form
Using jQuery | FormGet < Liked it!
It’s an amazing article in favor of all the web visitors;
they will take benefit from it I am sure.