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.
ReplyDeleteBTW a cool idea.. and good work shri.
Keep it UP
like a magic....
ReplyDeletecool sree..........great job.....
ReplyDeletewow.. cool!! I always learn a lot from you! always checking your blog :)
ReplyDeleteNice. Thanks!
ReplyDeleteVery Nice Srinu :) please place the auto complete off for those text box to clear history on browsers.
ReplyDelete@Anil
ReplyDeleteThanks 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 [email protected] will fail based o this authentication. Same goes for domains such as .museum.
ReplyDeleteI 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.
ReplyDeletenice and very good
ReplyDeletea right clique is making a copy/inserts and the next input does not open down ( otherwise good little code , but absolute unnecessary)
ReplyDeletethanks super like
ReplyDeleteThis one looks neat when you switch between login/registration/forget: http://i4getu.com
ReplyDeletenice!!
ReplyDeletevery nice job and thanks
ReplyDeleteGreat!
ReplyDeletethis is a useful article
ReplyDeleteI DON'T KNOW HOW MANY TIME I WILL BOOKMARK EACH PAGE OF THIS WEBSITE.
ReplyDeleteSrinivas 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 ?
ReplyDeletewill it run even i dont have any internet connections??
ReplyDeleteI want to have two e-mail fields and compare them-they must be equal before the password field shows up.
ReplyDeleteExcellent blog.. Cool..
ReplyDeleteGreat! Tnx
ReplyDeletecan you let e know how can i attach it in vbulletin 4 forums...
ReplyDeletereally ned your help in that !
Another helpful post with vital source code. You are doing great job. good on you.
ReplyDeleteGreat but how can send this value into db plz tell me with connection and query
ReplyDeleteSuper but how can I send this value into database plz tell me with connection and query
ReplyDeleteHow can i send this value to database..
ReplyDeleteEx.:
ReplyDeleteJavaSript:
var URL = "mysqlquery.php";
$.post(URL,{ email: email.val()});
...
PHP(mysqlquery.php):
nice tut tks
ReplyDeleteu are my idol now..haha.great tutorial bro..
ReplyDeleteNo doubt you great.
ReplyDeleteThanks
@bestandcheap-hosting.com
ReplyDeleteNice implementation.
how to create "drop down" list.?
ReplyDeleteHello,
ReplyDeleteGood 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
ReplyDelete:)
ReplyDeleteIt is possible that after entering data, the first field to become faded but visible, while the second field is highlighted?
ReplyDelete^)
ReplyDeletenice post... but when u r using autofill the form data its not populating username field.
ReplyDeletefor 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
ReplyDeleteI wonder If I want to add a birth date,
ReplyDeleteCan you help ?
how to connect with db?
ReplyDeleteNice Post. Thanks
ReplyDeleteNice job :)
ReplyDeleteIs it possible to auto fill the name and lastname
when just put email?
in fact i have long list of csv with Email,Name,Last,Name is it possible to connect then customer will be surprise to see the auto fill?
Thanks for your time
how can we do for radio buttons
ReplyDeletehow can i do with the radio buttons
ReplyDeletei have added some extra fields. when I am trying for radio button i am facing the problem can you give me the code please...
ReplyDeletecan we use it with radio buttons???
ReplyDeletePls tell
it is mind blasting ,first time i am seeeing it..but how to add birth day field
ReplyDeleteawesome post , i like this tutorial.
ReplyDeleteniice jquery
ReplyDeletethnx
ReplyDelete:) nice one
ReplyDeleteNice post, Thank you...
ReplyDeleteExcellent Script Thank You....
ReplyDeletehow can i pass control over to php in order to enter data in database
ReplyDeleteregular expression for phone pls
ReplyDeletepls let me knw how to regular expression for phone no
ReplyDeletein your regular expression :
ReplyDeletevar ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
i not understand:[\w-] ,what work of '-' sign .
please explain sir...
i googled it but not find answer.
Thanks for Such an Useful Article. :)
ReplyDelete