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 
Live DemoJavascript 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>
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>
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>
<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>
<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'});
}
});
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;
}
{
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;
}
Not working when you paste entries, or you select from auto suggestion from browser history.
BTW a cool idea.. and good work shri.
Keep it UP
like a magic....
cool sree..........great job.....
wow.. cool!! I always learn a lot from you! always checking your blog :)
Nice. Thanks!
Very Nice Srinu :) please place the auto complete off for those text box to clear history on browsers.
@Anil
Thanks a lot
<input type='text' name='email' AUTOCOMPLETE=OFF />
The regexp for email validation does not conform to RFC standards. For example, a valid email such as user+filter@domain.com will fail based o this authentication. Same goes for domains such as .museum.
I highly urge anybody who uses this expression to abandon it and opt for one that conforms to RFC specifications.
You want to consider giving sites like this (I'm not affiliated) a read: http://www.dominicsayers.com/isemail/
Definitely, a cool idea. Just be careful about using this for large forms as people will become discouraged if more fields keep showing up.
nice and very good
a right clique is making a copy/inserts and the next input does not open down ( otherwise good little code , but absolute unnecessary)
thanks super like
This one looks neat when you switch between login/registration/forget: http://i4getu.com
nice!!
very nice job and thanks
Great!
this is a useful article
I DON'T KNOW HOW MANY TIME I WILL BOOKMARK EACH PAGE OF THIS WEBSITE.
Srinivas Tamada, YOU ARE CRAAAAAAZZZZLY GOOD!!!!
SERIOUSLY, IS IT THE FACT THAT YOU ARE INDIAN OR WHAT ?
SUPER
Now i have a question. If i don't want to use "li" and i want to use a table balise like "tr td MY TEXT HERE td tr", it doen't work. How to make it work with that ?
will it run even i dont have any internet connections??
I want to have two e-mail fields and compare them-they must be equal before the password field shows up.
Excellent blog.. Cool..
Great! Tnx
can you let e know how can i attach it in vbulletin 4 forums...
really ned your help in that !
Another helpful post with vital source code. You are doing great job. good on you.
Great but how can send this value into db plz tell me with connection and query
Super but how can I send this value into database plz tell me with connection and query
How can i send this value to database..
Ex.:
JavaSript:
var URL = "mysqlquery.php";
$.post(URL,{ email: email.val()});
...
PHP(mysqlquery.php):
nice tut tks
u are my idol now..haha.great tutorial bro..
No doubt you great.
Thanks
@bestandcheap-hosting.com
Nice implementation.
Thanks.
how to create "drop down" list.?
Hello,
Good Job brother!
I added Name and Last Name fields.
Now I want to send data to DB.
I added action and method tags to the form and I still at the same page (Thank you!)
Also, I tried to Add select tag to make user choose Mr, Mme ... and it doesn't work ...
How can I do??
your brain is Fun Tastic man . . . thanks alot
:)
It is possible that after entering data, the first field to become faded but visible, while the second field is highlighted?
^)
nice post... but when u r using autofill the form data its not populating username field.
for ex: autofill the email field, next username field is not loading
i want to add 1 more field for file , i tried the code but its not running , pls help me out
I wonder If I want to add a birth date,
Can you help ?
how to connect with db?
Nice Post. Thanks