Gravity Registration Form with Jquery

HTML JAVASCRIPT JQUERY WEBDESIGN

{ 40 comments } Delicious

inShare3 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!

Download Script Javascript Code

Live Demo

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(pass word) ) { $("#form").show().html("<h1>Thank you!</h1>"); } return false; }); }) </script>

Tutorial : Submit form with out refreshing page More details Regular expressions 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 new field

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

City HTML Code Just include 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; }