ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

How to Validate a Registration Form with jQuery, PHP and MySQL database

validateRegFormjQueryPIIn this tutorial, I will teach you how to validate a registration form with jQuery, PHP and MySQL database. Validating a registration form is very important because it serves as a guide to the user when they fill up the fields in the form. With the use of jQuery, it will validate the fields before submitting the form.

 

So, let’s begin:

 

  • Create a database in the MySQL and name it “peopledb“.
  • Make a query for creatinga table in the database that you have created.
 CREATE TABLE `registrationdb`.`tblregistration` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`FULLNAME` VARCHAR( 90 ) NOT NULL ,
`ADDRESS` VARCHAR( 90 ) NOT NULL ,
`CONTACTNO` VARCHAR( 30 ) NOT NULL ,
`EMAILADD` VARCHAR( 90 ) NOT NULL ,
`PASSWORD` VARCHAR( 90 ) NOT NULL
) ENGINE = INNODB;
  • Create a landing page and name it “registration.php“.
  • Do the following codes for the design of a registration form.
<!DOCTYPE html>
<html>
<head>
 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
 <style type="text/css">
 form label.error, label.error { 
 color: red;
 font-style: italic
 }
 div.error { 
 display: none; 
 }
 input { 
 border: 1px solid black; 
 }
 input:focus {
 border: 1px dotted black; 
 }
 input.error {
 border: 1px dotted red; 
 } 
 #signupForm label.error {
 margin-left: 10px;
 width: auto;
 display: inline;
 }
 </style>
 <title></title>
</head>
<body>
 <form action="process.php" class="form-horizontal span6 container" id=
 "signupForm" method="post" name="signupForm">
 <div class="row">
 <div class="col-lg-12">
 <h1 class="page-header">Register</h1>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for=
 "FNAME">Firstname:</label>
 <div class="col-md-6">
 <input class="form-control input-sm" id="FNAME" name="FNAME" placeholder="Firstname" type="text" value="">
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for=
 "LNAME">Lastname:</label>
 <div class="col-md-6">
 <input class="form-control input-sm" id="LNAME" name="LNAME" placeholder="Lastname" type="text" value="">
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for=
 "USERNAME">Username:</label>
 <div class="col-md-6">
 <input class="form-control input-sm" id="USERNAME" name="USERNAME" placeholder="Username" type="text" value="">
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for="EMAILADD">Email
 Address:</label>
 <div class="col-md-6">
 <input class="form-control input-sm" id="EMAILADD" name="EMAILADD" placeholder="Email Address" type="text" value=
 "">
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for=
 "PASS">Password:</label>
 <div class="col-md-6">
 <input class="form-control input-sm" id="PASS" name="PASS"
 placeholder="Password" type="password" value="">
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for=
 "CPASS">Confirm Password:</label>
 <div class="col-md-6">
 <input class="form-control input-sm" id="CPASS" name="CPASS" placeholder="Password" type="password" value="">
 </div><label class="col-md-2 password"></label>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-8">
 <label class="col-md-4 control-label" for="idno"></label>
 <div class="col-md-8">
 <button class="btn btn-primary btn-sm" name="save" type="submit"><span class="fa fa-save fw-fa"></span>
 Save</button>
 </div>
 </div>
 </div>
 </form>
</body>
</html>
  • Set the following jQuery plugins.
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
  • Create a script for validating a registration form.
 <script>
 $(document).ready(function() { 
 // validating signup form on keyup and submit
 $("#signupForm").validate({
 rules: {
 FNAME: "required",
 LNAME: "required",
 USERNAME: {
 required: true,
 minlength: 4
 },
 PASS: {
 required: true,
 minlength: 8
 },
 CPASS: {
 required: true,
 minlength: 8,
 equalTo: "#PASS"
 },
 EMAILADD: {
 required: true,
 email: true
 }
 },
 /**set the validating message */
 messages: {
 FNAME: "Please enter your firstname",
 LNAME: "Please enter your lastname",
 USERNAME: {
 required: "Please enter a username",
 minlength: "Your username must consist of at least 4 characters"
 },
 PASS: {
 required: "Please provide a password",
 minlength: "Your password must be at least 8 characters long"
 },
 CPASS: {
 required: "Please provide a password",
 minlength: "Your password must be at least 8 characters long",
 equalTo: "Password does not match."
 },
 EMAILADD: "Please enter a valid email address",
 
 }
 });

 });
</script>
  • Create a method for saving data in the MySQL database.
<?php
$server = "localhost";
$dbuser = "root";
$dbpass ="";
$dbname ="registrationdb";
//connection between mysql and php
$con = mysql_connect($server,$dbuser,$dbpass);
//validate your connection
if(isset($con)){
 $res = mysql_select_db($dbname);
 if (!isset($res)) {
 echo "No database found!";
 }
}else{
 echo "Unable to connect to the mysql database";
}

//set a query for inserting data in the database
$sql ="INSERT INTO `tblregistration` (`FNAME`, `LNAME`, `EMAILADD`, `USERNAME`, `PASSWORD`) 
 VALUES ('".$_POST['FNAME']."','".$_POST['LNAME']."','".$_POST['EMAILADD']."','".$_POST['USERNAME']."','".$_POST['PASS']."')";
//Execute the query
$result = mysql_query($sql) or die(mysql_error());
//validate the executed query.
if ($result>0) {
 
 echo "<h1>Your now successfully resgistered!</h1>";
} 
?>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

 
Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

Leave a Reply

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

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!