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

<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 = /^[ [email protected] #$%^&*()_]{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. tes t(password) )

{

$( "#form" ). show (). html ( "<h1>Thank you!</h1>" );

}

return false;

});



})

</script> type="" src="type="" src="type="$(()// Displaying first list email field$().();// Regular Expressionsvar ck_username =var ck_email =var ck_password =$().()var email=.val();(!ck_email.(email))().().);().();$().).);});$().()var username=.val();(!ck_username.(username))().().);()();$().).);});$().()var password=.val();(!ck_password.(password))().().);().();$().).);});$().()var email=$().val();var username=$().val();var password=$().val();if(ck_email.(email)ck_username.(username)ck_password.t(password) )$().().);});})

Contains javascipt code.is the ID name of input field. Usingcalling input field value. Fields validating using regular expressions.Tutorial : Submit form with out refreshing page More details Regular expressions 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 new field

If you want to add new field eg:. It's very simple just follow the stepJust include following code after thefield.

<li class=" city ">

<label> City: </label><br/>

<input type=" text " name=" city " id=" city " />

<span class=" error "></span>

</li>

You have to do small modification atcode. Just replaceto

// 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'} );

}

});

Herewhile page loading jquery displaying first listemail field.