9lessons programming blog
Loading Search
9lessons Bring Friends
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.
Comments
{ 56 comments }
Bruce said...

good work bro

Deepak Kamat said...

Great tutorial

Anonymous said...

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

Zonetti said...

thumbs up for jquery.validate :)

Fábio said...

The best tutorial.

Anil kumar said...

Wow

Sumon @ WP Cypher said...

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

Sajib.... said...

Very Nice..

Mp3 Grátis said...

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

Ghia Ekaraksa said...

Nice and helpful tutorial

King said...

Great Article...

DevelopersCode said...

Nice one..!

Godwin said...

Its Amazing man

John said...

Thanks a lot Sriniva ;)

Anonymous said...

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.

David said...

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

turgon said...

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 ^^

Dyzlizio said...

Great tutorial Sriniva. Thans for sharing

mhoney said...

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?

ekkarach said...

good job! thank you very much

cicekci said...

thank you. wonderful

Anonymous said...

Thanks. its save my life

Ahmed Mohammed said...

nice post am impress

hcg hormone diet said...

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

sujay said...

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

Klaitos said...

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

Anonymous said...

Nice one bro..

chandresh said...

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

subir said...

so nice subjective tutorial...

John said...

Great tutorial, exactly what I needed.

Anonymous said...

very nice

Speaky Mag said...

Great tutorials tanks ya !

Nangadef said...

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

m-holkesvik said...

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

Kokil Thapa said...

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

^tHE [v]IKING^ said...

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

Ivan Alejandro said...

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

Anonymous said...

good article

Anonymous said...

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

Prerak Dave said...

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

test said...

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

Sarathi Yogesh said...

thanks

Anonymous said...

You need to add the following code to your script:

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

Stefano Calì said...

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

Ali said...

Very useful. Thanks.

Webby Dev said...

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?

Anonymous said...

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

Anonymous said...

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

Anonymous said...

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

Thank's

Anonymous said...

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

kapil said...

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

Anonymous said...

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

Krishnakumar arutwar said...

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

Suhel Sayyad said...

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

Anonymous said...

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.

Anonymous said...

Good Work. But Live Demo Not Working..

Post a Comment