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

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. Thanks. its save my life

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

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

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

    ReplyDelete
  15. so nice subjective tutorial...

    ReplyDelete
  16. Great tutorial, exactly what I needed.

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

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

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

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

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

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

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

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

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

    Thank's

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

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

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

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

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

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

    ReplyDelete

mailxengine Youtueb channel
Make in India
X