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