Gravity Registration Form with Jquery
Wall Script
Follow Me:
Wednesday, January 05, 2011

Gravity Registration Form with Jquery

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!

delete records before color change

Download Script     Live Demo

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>

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>

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>

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'});
}
});


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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


61 comments:

  1. 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

    ReplyDelete
  2. cool sree..........great job.....

    ReplyDelete
  3. wow.. cool!! I always learn a lot from you! always checking your blog :)

    ReplyDelete
  4. Very Nice Srinu :) please place the auto complete off for those text box to clear history on browsers.

    ReplyDelete
  5. @Anil

    Thanks a lot

    <input type='text' name='email' AUTOCOMPLETE=OFF />

    ReplyDelete
  6. 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/

    ReplyDelete
  7. Definitely, a cool idea. Just be careful about using this for large forms as people will become discouraged if more fields keep showing up.

    ReplyDelete
  8. a right clique is making a copy/inserts and the next input does not open down ( otherwise good little code , but absolute unnecessary)

    ReplyDelete
  9. thanks super like

    ReplyDelete
  10. This one looks neat when you switch between login/registration/forget: http://i4getu.com

    ReplyDelete
  11. 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

    ReplyDelete
  12. 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 ?

    ReplyDelete
  13. will it run even i dont have any internet connections??

    ReplyDelete
  14. I want to have two e-mail fields and compare them-they must be equal before the password field shows up.

    ReplyDelete
  15. can you let e know how can i attach it in vbulletin 4 forums...
    really ned your help in that !

    ReplyDelete
  16. Another helpful post with vital source code. You are doing great job. good on you.

    ReplyDelete
  17. Great but how can send this value into db plz tell me with connection and query

    ReplyDelete
  18. Super but how can I send this value into database plz tell me with connection and query

    ReplyDelete
  19. How can i send this value to database..

    ReplyDelete
  20. Ex.:

    JavaSript:
    var URL = "mysqlquery.php";
    $.post(URL,{ email: email.val()});
    ...

    PHP(mysqlquery.php):

    ReplyDelete
  21. u are my idol now..haha.great tutorial bro..

    ReplyDelete
  22. No doubt you great.
    Thanks

    ReplyDelete
  23. @bestandcheap-hosting.com

    Nice implementation.

    ReplyDelete
  24. how to create "drop down" list.?

    ReplyDelete
  25. 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??

    ReplyDelete
  26. your brain is Fun Tastic man . . . thanks alot

    ReplyDelete
  27. It is possible that after entering data, the first field to become faded but visible, while the second field is highlighted?

    ReplyDelete
  28. 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

    ReplyDelete
  29. i want to add 1 more field for file , i tried the code but its not running , pls help me out

    ReplyDelete
  30. I wonder If I want to add a birth date,
    Can you help ?

    ReplyDelete
  31. how to connect with db?

    ReplyDelete
  32. Nice job :)
    Is 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

    ReplyDelete
  33. how can we do for radio buttons

    ReplyDelete
  34. how can i do with the radio buttons

    ReplyDelete
  35. i have added some extra fields. when I am trying for radio button i am facing the problem can you give me the code please...

    ReplyDelete
  36. can we use it with radio buttons???
    Pls tell

    ReplyDelete
  37. it is mind blasting ,first time i am seeeing it..but how to add birth day field

    ReplyDelete
  38. awesome post , i like this tutorial.

    ReplyDelete
  39. Excellent Script Thank You....

    ReplyDelete
  40. how can i pass control over to php in order to enter data in database

    ReplyDelete
  41. pls let me knw how to regular expression for phone no

    ReplyDelete
  42. in your regular expression :
    var 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.

    ReplyDelete

Make in India