Implementing Gravity Registration Form Using Jquery.

Sometimes registration form decides your web application success rate, I feel the first step(registration) should be fewer fields and eye-catching it will surely impress the users. I had designed a new style registration form with a gravitational effect. I hope you like this.

Javascript Code

Contains javascipt code. $("#email").keyup(function(){}- email is the ID name of input field. Using $(this).attr("id") calling input field value. Fields validating using regular expressions.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(function() 
{
// Displaying first list email field 
$("ul li:first").show();
// Regular Expressions
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
// Email validation
$('#email').keyup(function()
{
var email=$(this).val();
if (!ck_email.test(email)) 
{
$(this).next().show().html("Enter valid email");
}
else
{
$(this).next().hide();
$("li").next("li.username").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Username validation
$('#username').keyup(function()
{
var username=$(this).val();
if (!ck_username.test(username)) 
{
$(this).next().show().html("Min 3 charts no space");
}
else
{
$(this).next().hide();
$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Password validation
$('#password').keyup(function()
{
var password=$(this).val();
if (!ck_password.test(password)) 
{
$(this).next().show().html("Min 6 Charts");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Submit button action
$('#submit').click(function()
{
var email=$("#email").val();
var username=$("#username").val();
var password=$("#password").val();
if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) )
{
$("#form").show().html("<h1>Thank you!</h1>");
}
return false;
});

})
</script>

HTML Code

Contains simple HTMl code.

<form method="post" >
<ul>
<li class="email">
<label>Email: </label><br/> 
<input type="text" name="email" id="email" />
<span class="error"></span>
</li>
<li class="username">
<label>Username: </label><br/> 
<input type="text" name="username" id="username" />
<span class="error"></span>
</li>
<li class="password">
<label>Password: </label><br/> 
<input type="password" name="password" id="password" />
<span class="error"></span>
</li>
<li class="submit">
<input type="submit" value=" Register " id='submit'/>
</li>
</ul>
</form>

How to add a new field

If you want to add new field eg: City. It's very simple just follow the step

City HTML Code

Just include the following code after the Password field.

<li class="city">
<label>City: </label><br/> 
<input type="text" name="city" id="city" />
<span class="error"></span>
</li>

City javascript code

You have to do small modification at Password code. Just replace $("li").next("li.submit") to $("li").next("li.city")

// Regular Expression 
var ck_city = /^[A-Za-z0-9 -]{3,20}$/;
// City validation
$('#city').keyup(function()
{
var email=$(this).val();
if (!ck_city.test(email)) 
{
$(this).next().show().html("Enter valid city");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});

Final CSS Code

Here li {display:none} while page loading jquery displaying first list li:first email field.

ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900;
font-size:14px;
padding:4px;
width:180px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:350px;
margin:0 auto;
margin-top:30px;
}