Skip to main content

HTML5 and jQuery Powered Signup Form

In this tutorial we are going to create a singup/registration form with html5 form attributer and jQuery form validate plugin. jQuery Validation is a powerful jQuery form validation checking plugin. We can check forms validity very easily with this plugin.

Live Demo Download Source

MySQL

First we have to create users table that will hold all user information like name, username, password, and email.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(128) NOT NULL,
  `username` varchar(64) NOT NULL,
  `password` varchar(64) NOT NULL,
  `email` varchar(124) NOT NULL,
  PRIMARY KEY (`id`)
);

HTML

This following html code resides in index.php file. That file holds the basic of registration form.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sign Up</title>

  <!-- bootstrap style sheet -->
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

  <!-- general styling -->
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">

</head>
<body>
  <div class="container">
    <div class="main">

      <div class="alert alert-error">
        <!-- error message will be shown here -->
      </div>

      <form class="form-horizontal" action="" method="post">

        <div class="control-group">
          <label for="name" class="control-label">
            <span>Full Name</span> <span class="required">*</span>
          </label>
          <div class="controls">
            <input type="text" name="name" id="name" required placeholder="Full name">
          </div>
        </div>

        <div class="control-group">
          <label for="username" class="control-label">
            <span>Username</span> <span class="required">*</span>
          </label>
          <div class="controls">
            <input type="text" name="username" id="username" required placeholder="username">
          </div>
        </div>

        <div class="control-group">
          <label for="password" class="control-label">
            <span>Password</span> <span class="required">*</span>
          </label>
          <div class="controls">
            <input type="password" name="password" id="password" required placeholder="Password">
          </div>
        </div>

        <div class="control-group">
          <label for="password2" class="control-label">
            <span>Repeat password</span> <span class="required">*</span>
          </label>
          <div class="controls">
            <input type="password" name="password2" id="password2" required placeholder="Repeat Password">
          </div>
        </div>

        <div class="control-group">
          <label for="email" class="control-label">
            <span>Email</span> <span class="required">*</span>
          </label>
          <div class="controls">  
            <input type="email" name="email" id="email" required placeholder="Email Address">
          </div>
        </div>

        <div class="controls">
          <input class="btn btn-primary" id="submit" type="submit" value="Sign Up!">
        </div>

      </form>

      <hr>

    </div>
  </div>

  <!-- jquery library include -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <!-- jquery validation plugin include -->
  <script src="assets/js/validation.min.js"></script>

  <script src="assets/js/script.js"></script>

</body>
</head>

Take a look on the above html markup, we used required attribute on input fields. It is a html5 attribute. It tells the browser that this field it required and user must have to fill this field.

jQuery

The following JavaScript resides in script.js file. This file holds jQuery Validation plugin's configurations. Here we needs to set some rules. Take a look on the comments to know more about the rules. We will also need to create a function called ajaxSubmit. This function will submit the form asynchronously through ajax request.

$(function(){

  var form  = $('form');
  var submit   = $('#submit');
  var alert  = $('.alert');

  // validate form
  form.validate({
    // validation rules
    rules: {
      // name field (required , minimum length 3)
      name: {
        required: true,
        minlength: 3
      },
      // username field (required , minimum length 3, max 8)
      username: {
        required: true,
        minlength: 3,
        maxlength: 8,
      },
      // password field (required , minimum length 6, max 16)
      password: {
        required: true,
        minlength: 6,
        maxlength: 16
      },
      // password2 field must be equal to password field
      password2: {
        equalTo: '#password'
      },
      // email field only required
      email: 'required'
    },
    // submit ajax request
    submitHandler: ajaxSubmit
  });

  /**
  * ajax submit function
  * sending simple ajax request
  **/

  function ajaxSubmit() {
    $.ajax({
      url: 'ajax.php',
      type: 'POST',
      dataType: 'json',
      // form serialize data
      data: form.serialize(),
      beforeSend: function(){
        alert.fadeOut();
        submit.val('Sending...').attr('disabled', 'disabled');
      },
      success: function(data){
        if ( data.status === 'success' ) {
          // if responce status == success redirect to success page
          $(location).attr('href','success.html');
        } else {
          // not success! show error messages
          alert.html(data.status).fadeIn();
          submit.val('Sign Up').removeAttr('disabled');
        }
      },
      error: function(){
        // show error message
        alert.html('Sending request fail').fadeIn();
        submit.val('Sign Up').removeAttr('disabled');
      }
    });
  };
});

PHP

We are now ready to write some php code. The following code is resides on ajax.php file. This file receives ajax request and checks some validity.

<?php
include 'config.php';
include 'function.php';
# mysql db connect
dbConnect();

header('Content-type: application/json');

if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
{
  if ($_POST['name'] !== '' and $_POST['username'] !== '' and $_POST['password'] !== '' and $_POST['email'] !== '' )
  {
    if ($_POST['password'] === $_POST['password2']) {
      # prevent sql injection
      $name     = mysql_real_escape_string($_POST['name']);
      $username   = mysql_real_escape_string($_POST['username']);
      $password   = mysql_real_escape_string($_POST['password']);
      $email     = mysql_real_escape_string($_POST['email']);

      # username exist or not
      if (!user_exist($username))
      {  # insert new user
        if (inser_new_user($name, $username, md5($password), $email))
        {  # throw success status
          json_status('success');
          # throw errors
        } else { json_status('Request not complete'); }
      } else { json_status('Username already exist'); }
    } else { json_status('Passwords are not matched'); }
  } else { json_status('You must complete all the fields'); }
}
?>
Note: It is not a secure way to process registrations data form server side. If you want to implement it in your real life project you need to do more validation.
Labels:

Popular posts from this blog

Multiple File Upload with Progress Bar using PHP & jQuery

Some days age I have created a post that deals with How we can upload file with progress bar using php and jQuery . Some of my readers asked me how we can upload multiple files with progress bar. In this post I am going to show you how we can upload multiple files with progress bar. We can upload multiple files with progress bar exactly same way as I shown previous. But we need to do some modification with our file upload form and our php script to handle multiple files.
Read more

File Upload with Progress Bar using jQuery and PHP

In this post you will learn how to create a AJAX file uploading system with progress bar using jQuery and PHP. For this purpose we will going to use jQuery Form Plugin . It is a easy to use and powerful jQuery AJAX form submitting plugin. It supports XMLHttpRequest Level 2 and iframe file transportation. That's why it will work for both old and new browsers.
Read more

Multiple File Upload with PHP

Sometimes we need to allow our users to upload multiple file upload. On my previous post I was shown the basic of simple file upload with PHP. Today I am going to show you how to allow users to upload multiple files. It is almost similar like simple file upload but we need to do some modification with html markup and php code . multiple attribute is needed to add on the html markup. Major web browsers like Firefox, Chrome, Safari and IE 9+ support this attribute. Now I am going to show you how to upload multiple file with PHP and basic HTML form.
Read more