Bootstrap Registration Form Tutorial.
Wall Script
Follow Me:
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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


57 comments:

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

    ReplyDelete
  2. thumbs up for jquery.validate :)

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

    ReplyDelete
  4. Very nice tutorial! Now teach us how to make it register the users on the database with php and after how to create a admin panel to see who have registered and also edit/delete users and how to give the pages we want a only registered users access! =D

    ReplyDelete
  5. 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
  6. Nice article.Really amazing work.Thank you very much.

    ReplyDelete
  7. 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
  8. Great tutorial Sriniva. Thans for sharing

    ReplyDelete
  9. 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
  10. good job! thank you very much

    ReplyDelete
  11. Thanks. its save my life

    ReplyDelete
  12. 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
  13. how to add php support and check if email has been used before??

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

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

    ReplyDelete
  16. so nice subjective tutorial...

    ReplyDelete
  17. Great tutorial, exactly what I needed.

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

    ReplyDelete
  19. 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
  20. Any one will help me to use this http://www.9lessons.info/2010/07/google-like-captcha-with-php.html captcha here

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

    ReplyDelete
  22. 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
  23. 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
  24. Please let me know for multiple form submit,(Like Next and back button) Please Please, thank you in advance

    ReplyDelete
  25. 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
  26. You need to add the following code to your script:

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

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

    ReplyDelete
  28. 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
  29. Just wondering what jquery.validate.js plug in you are using. Where can we get it from?

    ReplyDelete
  30. 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
  31. wow fantastic...
    how to check username available Bootstrap? Please...

    Thank's

    ReplyDelete
  32. 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
  33. Hi, Nice post dude.
    the way you explain is good.

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

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

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

    ReplyDelete
  37. 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
  38. Good Work. But Live Demo Not Working..

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

    ReplyDelete

Make in India