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.
Download Script 
Live DemoDownload 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>
<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>
<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>
.......
.......
</div>
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>
.......
.......
</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.
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>
<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>
Well done! You successfully read this important alert message.
</div>
good work bro
Great tutorial
If is F*$£"$Q££G awesome! Just what I needed.
thumbs up for jquery.validate :)
The best tutorial.
Wow
Nice and useful tutorial. Thanks for adding the JavaScript validation. It has taken the tutorial to the next level.
Very Nice..
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
Nice and helpful tutorial
Great Article...
Nice one..!
Its Amazing man
Thanks a lot Sriniva ;)
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.
Nice article.Really amazing work.Thank you very much.
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 ^^
Great tutorial Sriniva. Thans for sharing
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?
good job! thank you very much
thank you. wonderful
Thanks. its save my life
nice post am impress
Bootstrapping or booting refers to a group of metaphors that share a common meaning a self sustaining process that proceeds without external help. Thanks.
how to add php support and check if email has been used before??
@sujay check remote function in validate js script. You will be able to call a php function to valide the input.
Nice one bro..
Really this register look so clean i will wait for more boostrap tutorials
so nice subjective tutorial...
Great tutorial, exactly what I needed.
very nice
Great tutorials tanks ya !
This is awesome, but can anyone help me learn how to actually get the content from the fields emailed to me?
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');
},
Any one will help me to use this http://www.9lessons.info/2010/07/google-like-captcha-with-php.html captcha here
i want to add one more form that is login form side by side pls tell me how to do it...
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
good article
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')
}
);
Please let me know for multiple form submit,(Like Next and back button) Please Please, thank you in advance
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).
thanks
You need to add the following code to your script:
$('input').mouseout(function () {
$(this).popover('destroy')
});
there should be a file in php to insert the record in my account?
Very useful. Thanks.
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?
Just wondering what jquery.validate.js plug in you are using. Where can we get it from?
Webby Dev: Read the comments. There are two solutions that worked. I went with the solution posted on: September 23, 2012 5:16 AM.
wow fantastic...
how to check username available Bootstrap? Please...
Thank's
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
Hi, Nice post dude.
the way you explain is good.
Any whay to clear the errors on hitting a reset button?
very nice post, I love to read it.
keep it up/.