Complete Registration Form With Jquery Validation In PHP

Complete Registration Form With Jquery Validation In PHP – Tutorial

Hi Friends, today I will show you how to create a responsive signup form using bootstrap, ajax, jquery, php and mysql. In this tutorial, we will learn how to make complete registration form with jquery validation in php.

Advantages:

  • Check live email availability.
  • Live Jquery validation.
  • Successful registration (signup) without page reloading.

 

STEP 1: Database Table

The database name I have used here is ‘projects’, so create database and copy paste the following sql code to store user details.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 

STEP 2:

Create a config.php file to configure the database.

<?php define('DBhost', 'localhost'); define('DBuser', 'root'); define('DBPass', ''); define('DBname', 'ajax-submit'); try{ $DB_con = new PDO("mysql:host=".DBhost.";dbname=".DBname,DBuser,DBPass); }catch(PDOException $e){ die($e->getMessage());
 }

 

STEP 3:

Next, create a ajax-signup.php file to insert and create a new user record and store it into mysql table.

<?php header('Content-type: application/json'); require_once 'config.php'; $response = array(); if ($_POST) { $name = $_POST['name']; $email = $_POST['email']; $pass = $_POST['cpassword']; $stmt = $DB_con->prepare('INSERT INTO users(name,email,password) VALUES(:name, :email, :pass)');
  $stmt->bindParam(':name', $name);
  $stmt->bindParam(':email', $email);
  $stmt->bindParam(':pass', $pass );
  $stmt->execute();
  
  // check for successfull registration
        if ($stmt->rowCount() == 1) {
   $response['status'] = 'success';
   $response['message'] = '<span class="glyphicon glyphicon-ok"></span> &nbsp; registered sucessfully, you may login now';
        } else {
   
            $response['status'] = 'error'; // could not register
   $response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> &nbsp; could not register, try again later';
        } 
 }
 
 
 echo json_encode($response);

 

STEP 4:

Then create a check-email.php file.

email : {
 required : true,
 validemail: true,
 remote: {
  url: "check-email.php",
  type: "post",
  data: {
   email: function() {
   return $( "#email" ).val();
          }
         }
 }
},

STEP 5:

Finally create a register.js file.

function submitForm(){
      
   $.ajax({

      type : 'POST',
      async: false,
      url  : 'ajax-signup.php',
      data : $('#register-form').serialize(),
      dataType : 'json',
      success : function(data){
                
  console.log(data);
          
  $('button').html('<img src="ajax-loader.gif" /> &nbsp; signing up...').attr('disabled', 'disabled');
          
  setTimeout(function(){
           
  if ( data.status==='success' ) {
       
       $('#errorDiv').slideDown(200, function(){
             $('#errorDiv').html('




<div class="alert alert-info">'+data.message+'</div>





');
       $('#errorDiv').delay(3000).slideUp(100);
       $("#register-form")[0].reset();
       $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
          $('#btn-signup').removeAttr('disabled');
     });
    } else {
       $('#errorDiv').slideDown(200, function(){ 
    $('#errorDiv').html('




<div class="alert alert-danger">'+data.message+'</div>





');
    $('#errorDiv').delay(3000).slideUp(100);
    $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
    $('#btn-signup').removeAttr('disabled');
       });
        }
  
               },3000);
   },
          error: function(){alert('Error!')}      
        }); 
        return false;
 }

For rest of the code, please download the full source code given with this tutorial. Hope you liked this tutorial for Complete Registration Form With Jquery Validation In PHP. Thanks for reading.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.