Wednesday, January 11, 2012

Gravity Registration Form With jQuery


Gravity Registration Form With jQuery

Filling up an online form doesn’t have to be a dull experience for your website visitors, especially if your aim is to make them feel good about accomplishing it. How? You can spruce up your online form by adding eye-catching effects to it. And that’s just what we’re going to do with the a little help from this jQuery tutorial. We’re going to give your visitors a very interesting and unique experience in filling up forms.



This jQuery code/effect is known as “Gravity Registration Form” because what it does is it shows the next hidden field for the user to fill up by making it drop down below the preceding one. You may check the animated gif image above to get a much clearer idea.

Here’s the 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>

Now here’s the 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>

Now in case you’d want to put in an additional field (which I’m pretty sure a lot of you would want to do), all you have to do is follow the 2 quick short steps below:
For example, you want to add “City” in the list of fields you insert this in the HTML code:
<li class="city">
<label>City: </label><br/>
<input type="text" name="city" id="city" />
<span class="error"></span>
</li>

And then go to the JavaScript and replace this:
$("li").next("li.submit") to $("li").next("li.city")

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

And now for the final CSS code, where 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;
}

You can download the script here (.zip, 30.3KB) or check out demo version here. Have fun trying it out and enjoy using the code!

Here are some of the best web design that you can check out .... 

No comments:

Post a Comment