Bootstrap Registration Form Tutorial.
Wall Script
Wall Script
Tuesday, April 17, 2012

Bootstrap Registration Form Tutorial.

This post is a continuation of my previous post Bootstrap tutorial for blog design and already explained about fluid page design. Today let's look at the form HTML elements that comes with Twitter Bootstrap toolkit using these I made a rich registration/sign up form with validation in 10 mins . Bootstrap helps you to produce clean and highly usable applications, it will reduce larger engineering efforts and gives uniform application solutions.

Bootstrap Tutorial for Registration Form.

Download Script     Live Demo

Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap.

Bootstrap CSS
Just include two CSS file bootstrap.css and bootstrap-responsive.css. You can use github url too http://twitter.github.com/bootstrap/assets/css/bootstrap.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span8">
// Registration form code.
</div>
</div>
</div>
</body>
</html>

For bootstrap page design reference please check my previous tutorial click here.

HTML Form Code
Here the red color font names are Bootstrap class elements for styling, you can use different class names for input size input-small, input-medium and input-large.
<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>

<legend>Registration</legend>

<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
</div>
</div>


<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
</div>
</div>

.............
.............

<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Create My Account</button>
</div>
</div>

</fieldset>
</form>

Success
For success status just add success class to the control-group div.
<div class="control-group success">
.......
.......
</div>

Bootstrap Tutorial for Registration Form.

Error
Same way for error status just add error class to the control-group div. While validation you have to apply these class styles using Jquery methods.
<div class="control-group error">
.......
.......
</div>

Popover for Information.
I really like this feature in Bootstrap it is simple just calling .popover method for javascript code take a look at the following javascript code. Notice html attribute for popover data-content for content and data-original-title for title.
Bootstrap Tutorial for Registration Form.

Download bootstrap asserts Click Here

JavaScript
Contains javascript code here you have to include Bootstrap assert javascript files refer my previous tutorial. $("#registerHere input").hover(function(){}- registerHere is the id name of form tag. Using $(this).popover(); calling delete.
<!-- Include Bootstrap Asserts JavaScript Files. -->
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Popover 
$('#registerHere input').hover(function()
{
$(this).popover('show')
});

// Validation
$("#registerHere").validate({
rules:{
user_name:"required",
user_email:{required:true,email: true},
pwd:{required:true,minlength: 6},
cpwd:{required:true,equalTo: "#pwd"},
gender:"required"
},

messages:{
user_name:"Enter your first and last name",
user_email:{
required:"Enter your email address",
email:"Enter valid email address"},
pwd:{
required:"Enter your password",
minlength:"Password must be minimum 6 characters"},
cpwd:{
required:"Enter confirm password",
equalTo:"Password and Confirm Password must match"},
gender:"Select Gender"
},

errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass)
{
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass)
{
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
});
</script>

For form validation I have included jquery validate plugin using addClass and removeClass methods applied success and error class styles to the control-group div.

Success Message
Registration status show this DIV tag after server side request successful.
<div class="alert alert-success">
Well done! You successfully read this important alert message.
</div>

Bootstrap Tutorial for Registration Form.
web notification

56 comments:

  1. BruceApril 17, 2012 at 1:13 AM

    good work bro

    ReplyDelete
  2. Deepak KamatApril 17, 2012 at 3:26 AM

    Great tutorial

    ReplyDelete
  3. AnonymousApril 17, 2012 at 8:16 AM

    If is F*$£"$Q££G awesome! Just what I needed.

    ReplyDelete
  4. ZonettiApril 17, 2012 at 8:20 AM

    thumbs up for jquery.validate :)

    ReplyDelete
  5. FábioApril 17, 2012 at 8:40 AM

    The best tutorial.

    ReplyDelete
  6. Anil kumarApril 17, 2012 at 9:28 AM

    Wow

    ReplyDelete
  7. Sumon @ WP CypherApril 17, 2012 at 12:51 PM

    Nice and useful tutorial. Thanks for adding the JavaScript validation. It has taken the tutorial to the next level.

    ReplyDelete
  8. Sajib....April 17, 2012 at 1:23 PM

    Very Nice..

    ReplyDelete
  9. UnknownApril 17, 2012 at 7:46 PM

    Nice and helpful tutorial

    ReplyDelete
  10. KingApril 17, 2012 at 11:39 PM

    Great Article...

    ReplyDelete
  11. DevelopersCodeApril 18, 2012 at 1:32 AM

    Nice one..!

    ReplyDelete
  12. GodwinApril 19, 2012 at 1:27 AM

    Its Amazing man

    ReplyDelete
  13. JohnApril 19, 2012 at 2:43 AM

    Thanks a lot Sriniva ;)

    ReplyDelete
  14. AnonymousApril 21, 2012 at 5:36 AM

    hey I have tried with on focus it does not work :s
    hover is good but not enough as user will click the input field to be filled. and help text in popover will be shown.

    ReplyDelete
  15. DavidApril 21, 2012 at 8:15 AM

    Nice article.Really amazing work.Thank you very much.

    ReplyDelete
  16. turgonApril 26, 2012 at 7:52 PM

    I used your code to create a simple website using nodejs: http://nodejs-forms.nodejitsu.com/

    The code is on github: https://github.com/tUrG0n/nodejs-forms

    Thx ^^

    ReplyDelete
  17. DyzlizioMay 3, 2012 at 1:46 PM

    Great tutorial Sriniva. Thans for sharing

    ReplyDelete
  18. mhoneyMay 7, 2012 at 9:06 PM

    Really like your example. Thank you for the tutorial. Only one small problem, how do you get the dropdown to turn back to error status when someone changes there selection back to the default selection?

    ReplyDelete
  19. ekkarachMay 13, 2012 at 12:07 PM

    good job! thank you very much

    ReplyDelete
  20. cicekciMay 23, 2012 at 9:05 AM

    thank you. wonderful

    ReplyDelete
  21. AnonymousMay 30, 2012 at 2:20 PM

    Thanks. its save my life

    ReplyDelete
  22. UnknownJune 1, 2012 at 4:16 AM

    nice post am impress

    ReplyDelete
  23. hcg hormone dietJune 6, 2012 at 3:22 AM

    Bootstrapping or booting refers to a group of metaphors that share a common meaning a self sustaining process that proceeds without external help. Thanks.

    ReplyDelete
  24. sujayJune 8, 2012 at 10:20 AM

    how to add php support and check if email has been used before??

    ReplyDelete
  25. UnknownJune 11, 2012 at 8:27 AM

    @sujay check remote function in validate js script. You will be able to call a php function to valide the input.

    ReplyDelete
  26. AnonymousJune 13, 2012 at 10:41 AM

    Nice one bro..

    ReplyDelete
  27. chandreshJune 13, 2012 at 11:38 AM

    Really this register look so clean i will wait for more boostrap tutorials

    ReplyDelete
  28. subirJune 23, 2012 at 1:05 AM

    so nice subjective tutorial...

    ReplyDelete
  29. JohnJune 24, 2012 at 7:22 AM

    Great tutorial, exactly what I needed.

    ReplyDelete
  30. AnonymousJune 24, 2012 at 10:25 AM

    very nice

    ReplyDelete
  31. Speaky MagJune 26, 2012 at 12:09 AM

    Great tutorials tanks ya !

    ReplyDelete
  32. NangadefJune 28, 2012 at 8:27 PM

    This is awesome, but can anyone help me learn how to actually get the content from the fields emailed to me?

    ReplyDelete
  33. m-holkesvikJuly 2, 2012 at 2:07 AM

    Great tutorial! One quick improvement though, in order to properly function in the instance of a user entering valid information, and then changing it to invalid input, you must modify your highlight funtion to remove the success class. My new function looked like this...

    highlight:function(element, errorClass, validClass) {
    $(element).parents('.control-group').removeClass('success');
    $(element).parents('.control-group').addClass('error');
    },

    ReplyDelete
  34. Kokil ThapaJuly 23, 2012 at 1:02 AM

    Any one will help me to use this http://www.9lessons.info/2010/07/google-like-captcha-with-php.html captcha here

    ReplyDelete
  35. ^tHE [v]IKING^July 24, 2012 at 3:29 AM

    i want to add one more form that is login form side by side pls tell me how to do it...

    ReplyDelete
  36. Ivan AlejandroJuly 31, 2012 at 6:56 PM

    Thanks, it's very useful.

    I made a correction in the js to fit my needs, maybe is a bug.

    In the highlight function i've removed the 'success' class too because this example:
    some user writes a needed entry and then deletes it.

    highlight: function(element, errorClass, validClass) {
    $(element).parents('.control-group').removeClass('success');
    $(element).parents('.control-group').addClass('error');


    for multiple email validation you can look up:
    https://forum.jquery.com/topic/jquery-validate-multiple-email-addresses-in-single-input

    ReplyDelete
  37. AnonymousAugust 2, 2012 at 5:29 AM

    good article

    ReplyDelete
  38. AnonymousSeptember 3, 2012 at 11:22 PM

    I made a change to the hover function to hide the popover when the mouse leaves the input field
    $('#registerHere input').hover(
    function(){
    $(this).popover('show')
    },
    function(){
    $(this).popover('hide')
    }
    );

    ReplyDelete
  39. UnknownSeptember 14, 2012 at 1:32 PM

    Please let me know for multiple form submit,(Like Next and back button) Please Please, thank you in advance

    ReplyDelete
  40. testSeptember 15, 2012 at 4:05 AM

    Can you look at the code. it's not worked for me on iphone. I means to the validation that you have used in your codebase.

    suppose look at http://iphonetester.com/ and test your own demo http://demos.9lessons.info/bootstrap/form.php

    Can you fix it.

    I thing better bet is showing the pop in bottom instead of left in iphone (through media queries).

    ReplyDelete
  41. AnonymousSeptember 17, 2012 at 3:48 AM

    thanks

    ReplyDelete
  42. AnonymousSeptember 22, 2012 at 7:46 PM

    You need to add the following code to your script:

    $('input').mouseout(function () {
    $(this).popover('destroy')
    });

    ReplyDelete
  43. UnknownOctober 16, 2012 at 2:12 PM

    there should be a file in php to insert the record in my account?

    ReplyDelete
  44. AliOctober 28, 2012 at 6:01 PM

    Very useful. Thanks.

    ReplyDelete
  45. UnknownOctober 30, 2012 at 10:12 PM

    Hey Great job! But one problem how can I make the popover goaway when the user enter text or some text exist pre exists in the input field?

    ReplyDelete
  46. AnonymousNovember 6, 2012 at 1:16 AM

    Just wondering what jquery.validate.js plug in you are using. Where can we get it from?

    ReplyDelete
  47. AnonymousDecember 7, 2012 at 11:38 AM

    Webby Dev: Read the comments. There are two solutions that worked. I went with the solution posted on: September 23, 2012 5:16 AM.

    ReplyDelete
  48. AnonymousFebruary 12, 2013 at 4:28 PM

    wow fantastic...
    how to check username available Bootstrap? Please...

    Thank's

    ReplyDelete
  49. AnonymousFebruary 12, 2013 at 4:36 PM

    Hi Greetings
    your tutorial is very nice and helpful ...

    I am interested in the Bootstrap Registration Form.
    how to check his username available?

    please .. thank you

    ReplyDelete
  50. kapilMay 8, 2013 at 8:10 AM

    Hi, Nice post dude.
    the way you explain is good.

    ReplyDelete
  51. AnonymousMay 8, 2013 at 6:54 PM

    Any whay to clear the errors on hitting a reset button?

    ReplyDelete
  52. Krishnakumar arutwarJune 13, 2013 at 6:11 PM

    very nice post, I love to read it.
    keep it up/.

    ReplyDelete
  53. Suhel SayyadJuly 9, 2013 at 12:08 PM

    Very nice post...Really informative one..!!!
    Keep the good work

    ReplyDelete
  54. AnonymousAugust 20, 2013 at 12:00 AM

    Looks good -- I am yet to try it out though. BTW your demo doesn't work anymore because the Bootstrap site has changed since the v3 release.

    ReplyDelete
  55. AnonymousAugust 12, 2014 at 9:16 AM

    Good Work. But Live Demo Not Working..

    ReplyDelete
  56. AnonymousApril 5, 2015 at 1:36 AM

    if i want to store these values in variables and then validate user using these values. How can i do it?

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X