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.

23 comments:

  1. Why does it show "Sending request fail"

    ReplyDelete

  2. Many mistake HTML as a programming language but rather its a markup language and not progaramming language. HtML5 is the latest and technically most advanced version of HTML. To know more
    html5 training in chennai|html5 training chennai

    ReplyDelete
  3. very useful post. I can easily remove this from my blog. Thanks a lot. For more details visit. JAPAN TSUNAMI 2011 comment link (207) welcome to new tab.

    ReplyDelete
  4. The best thing about HTML5 is that it allows the developers to embed the video files, audio files, and high quality graphics without any third party applications.
    html5 training in chennai | html5 training institutes in chennai | Fita Chennai reviews

    ReplyDelete
  5. Hi, actually I'am new to angularJs and infact I'am learning angularjs with online training. I'am having doubt, if you could solve the doubt for me that would be very helpful. The doubt is, how can I reset a “$timeout”, and disable a “$watch()”?
    Regards,
    angularjs training in Chennai | angularjs training | angularjs training Chennai

    ReplyDelete
  6. You can go through your entire life and not ever hear the term HTML or realize the role it plays every time they go to a websites. When you are learning to make websites, a HTML codes list will become one of your best tools, and the first step to losing your fear. Take a look: html code

    ReplyDelete
  7. Fantastic post and excellent applications for your business with affordable rates website design service

    ReplyDelete
  8. PHP is the best language to develop data driven websites. PHP is used by majority of the ecommerce websites. Learning PHP can give you a great future for sure.
    PHP training in Chennai | PHP course in Chennai | PHP training institute in Chennai

    ReplyDelete
  9. Dot net is a Microsoft product so it is the best language to develop applications for windows and it is supported well on the windows platform. Dot net is prefferd globally and a renowned platform with lots of job opportunities.
    Dot net training in Chennai | .NET training in Chennai | Dot net course in Chennai

    ReplyDelete
  10. I have completely read your post and the content is crisp and clear.Thank you for posting such an informative article, I have decided to follow your blog so that I can myself updated.
    Android training in Chennai | Android course in Chennai | Android training institute in Chennai

    ReplyDelete
  11. The blog you presented was very nice and interesting which helped me to get update on the recent technologies.
    Angularjs training in chennai | Angularjs course in Chennai

    ReplyDelete
  12. The blog you presented was very nice and interesting which helped me to get update on the recent technologies.
    Angularjs training in chennai | Angularjs course in Chennai

    ReplyDelete
  13. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Web Designing Course in Chennai | web designing training in chennai

    ReplyDelete
  14. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Angularjs training in chennai | Angularjs course in Chennai

    ReplyDelete
  15. Wow, Explained well and useful example guys. Your post really helped me to create the form by myself. Pls check it out here,
    Best AngularJS Training in Chennai | AngularJS Training and Placement assistance | AngularJS Training Institute in Chennai

    ReplyDelete

Go to top