Gravity Registration Form With jQuery
Jazz up your online form by adding eye-catching effects to it with this jQuery tutorial!
This jQuery code is known as the “Gravity Registration Form” because it shows the next hidden field for the user to fill up by making it drop down below the preceding one. Click on the image above for the demo.
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>
<label>Email: </label><br/>
<input type="text" name="email" id="email" />
<span></span>
</li>
<li>
<label>Username: </label><br/>
<input type="text" name="username" id="username" />
<span></span>
</li>
<li>
<label>Password: </label><br/>
<input type="password" name="password" id="password" />
<span></span>
</li>
<li>
<input type="submit" value=" Register " id='submit'/>
</li>
</ul>
</form>
|
In case you want to put in an additional field, just follow the 2 short steps below:
For example, you want to add “City” in the list of fields you insert this in the HTML code:
<li>
<label>City: </label><br/>
<input type="text" name="city" id="city" />
<span></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;
}
|
Download the full script here (.zip, 30.3KB).
0
510
No comments
Your Web Design resources for your needs » Blog Archive » An awesome way to create a cool looking for with jquery
03.28.2012
[...] Gravity Registration Form With jQuery [...]
There are no trackbacks to display at this time.