Register form script with Jquery

This is a simple Jquery script that shows how to use Jquery to register a user on your site.
The back-end is written in PHP while the front end is simple HTML.
The script shows the basic usage of jquery and is easy and understand to use by the beginners.

Live Demo

Download it!

1. Register.html:

<div><a href="http://www.webspeaks.in">Webspeaks.in</a>
  </a></div>
<div style="margin:60px;   padding:20px">


<div style="margin-bottom:6px">
<h2>Register</h2><div id="result"></div>
<label>Username</label> <br/>
<input type="text" name="uname"  class="input" id="uname"/><div id="user_res"></div><br />
<label>Email</label> <br/>
<input type="text" name="email"  class="input" id="email"/><div id="email_res"></div><br />
</div>

<div style="" id="login_block">
<label>Password</label><br />
<input type="password" name="password" class="input" id="password"/><div id="pass_res"></div><br/>
<label>Confirm password</label><br/>
<input type="password" name="conpassword" class="input" id="conpassword" /><div id="conpass_res"></div><br/>
<input type="submit" value=" Signup " class="button" id="signup"/>
</div>


</div>

2. Javascript code:

$(document).ready(function()
{
 $('#signup').click(function()
 {
  if($('#uname').val()=='')
  {
   $('#user_res').html('<label class="error">Username cannot be empty!<label>');
   return false;
  }
  else
  {
   $('#user_res').empty();
  }
  
  if($('#email').val()=='')
  {
   $('#email_res').html('<label class="error">Email cannot be empty!<label>');
   return false;
  }
  else
  {
   $('#email_res').empty();
  }

  if($('#password').val()=='')
  {
   $('#pass_res').html('<label class="error">Password cannot be empty!<label>');
   return false;
  }
  else
  {
   $('#pass_res').empty();
  }

  if($('#conpassword').val()=='')
  {
   $('#conpass_res').html('<label class="error">Confirmation password cannot be empty!<label>');
   return false;
  }
  else
  {
   $('#conpass_res').empty();
  }
  
  if($('#conpassword').val() != $('#conpassword').val())
  {
   $('#conpass_res').html('<label class="error">The passwords do not match!<label>');
   return false;
  }
  else
  {
   $('#conpass_res').empty();
  }

   $.ajax({
      'url':'reg.php','data':'username='+$('#uname').val()+'&email='+$('#email').val()+'&password='+$('#password').val(),
      'type':'POST',
      'success':function(data)
      {
       if(data.length)
       {
         $('#result').html(data);
     }
    }
   });

 });
});

3. CSS Code:

body
{
font-family:Arial, Helvetica, sans-serif;

font-size:12px;
}
label
{
color:#999;
padding:4px;
margin-top:4px;
color:#006699;
}
.input
{
padding:9px;
border:solid 1px #999;
margin:4px;
width:220px;
}
.button
{
font-size:15px;
padding:6px;
font-weight:bold;
}
label.error
{
font-size:11px;
background-color:#dedede;
color:#FF0000;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
label.suc
{
font-size:11px;
background-color:#dedede;
color:#00CC00;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

4. reg.php

Registration successful!";
<?php
 $username = $_POST['username'];
 $email = $_POST['email'];
 $password = $_POST['password'];
 if($username!="" && $password!="" && $email!="")
 {
  echo "<label class='suc'>Registration successful!</label>";
 }
 else
 {
  echo "<label class='error'>Registration failure!</label>";
 }
?>