Blogs Hub

by AskGif | Aug 26, 2019 | Category :coding

Implementing Bootstrap Registration Form Tutorial.

Implementing Bootstrap Registration Form Tutorial.

<p>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.</p> <p>&nbsp;</p> <p>Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap.&nbsp;</p> <p>&nbsp;</p> <p>Bootstrap CSS</p> <p>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</p> <pre class="language-markup"><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Page Title&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;link href="assets/css/bootstrap.css" rel="stylesheet"&gt; &lt;link href="assets/css/bootstrap-responsive.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="span8"&gt; // Registration form code. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>&nbsp;</p> <p>HTML Form Code</p> <p>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.&nbsp;</p> <pre class="language-markup"><code>&lt;form class="form-horizontal" id="registerHere" method='post' action=''&gt; &lt;fieldset&gt; &lt;legend&gt;Registration&lt;/legend&gt; &lt;div class="control-group"&gt; &lt;label class="control-label"&gt;Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;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"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label"&gt;Email&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What&rsquo;s your email address?" data-original-title="Email"&gt; &lt;/div&gt; &lt;/div&gt; ............. ............. &lt;div class="control-group"&gt; &lt;label class="control-label"&gt;&lt;/label&gt; &lt;div class="controls"&gt; &lt;button type="submit" class="btn btn-success" &gt;Create My Account&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p>&nbsp;</p> <p>Success</p> <p>For success status just add success class to the control-group div.&nbsp;</p> <pre class="language-markup"><code>&lt;div class="control-group success"&gt; ....... ....... &lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>Error</p> <p>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.&nbsp;</p> <pre class="language-markup"><code>&lt;div class="control-group error"&gt; ....... ....... &lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>Popover for Information.</p> <p>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 the title.</p> <p>&nbsp;</p> <p>JavaScript</p> <p>$("#registerHere input").hover(function(){}- registerHere is the id name of form tag. Using $(this).popover(); calling delete.&nbsp;</p> <pre class="language-javascript"><code>&lt;!-- Include Bootstrap Asserts JavaScript Files. --&gt; &lt;script type="text/javascript" src="jquery.validate.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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'); } }); }); &lt;/script&gt;</code></pre> <p>&nbsp;</p> <p>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.&nbsp;</p> <p>&nbsp;</p> <p>Success Message</p> <p>Registration status shows this DIV tag after the server-side request successful.&nbsp;</p> <p>&nbsp;</p>

read more...