Designing Bootstrap Signup Form with jQuery Validation

In this tutorial i am going to show how to create a simple responsive signup form using bootstrap. bootstrap is awesome css/js designing front end framework and i love to work with bootstrap and in most of my web projects i have used bootstrap for designing purpose. so here In this tutorial there's a simple bootstrap registration form with jQuery validation. you can take a look at live demo. so let's start code.

Live Demo

Download Script

Read also : Parsley Form Validation Example
Read also : HTML5 Form Validation Example
Read also : Server Side Form Validation Example using PHP

Looking for Login, Sign Up & Forgot Password Modal Forms using Bootstrap ? I have covered it here

Starts with Bootstrap

I have used bootstrap version 3.3.6, download it from the official site ok, after downloading files just put it within documents <head> tag, just like this :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Form with jQuery Validations</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
</head>

We will See :

- Creating a Responsive Bootstrap Signup Form.
- Adding jQuery Validations into BootStrap Form.
- How to Add Custom Rules into jQuery Validation.

Bootstrap Part : Signup Form

here is our form Simple HTML Markup

<body>

    <div class="container">

    <div class="signup-form-container">
    
         <!-- form start -->
         <form role="form" id="register-form" autocomplete="off">
         
         <div class="form-header">
         <!-- form header -->       
         </div>
         
         <div class="form-body">
                          
          <!-- form body will be here, input controls -->              
              
         </div>
            
         <div class="form-footer">
            <!-- form footer, let say for submit button -->
         </div>

         </form>
            
    </div>

    </div>

</body>

now let see how to add input controls with glyphicon for better look. input control should be within form-group div, to add glyphicon into input box make another div with class="input-group" then just below the input group make another div with class="input-group-addon" now add the suitable glyphicon into addon group div like this <span class="glyphicon glyphicon-user"></span>

<div class="form-group">
     <div class="input-group">
     <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
     <input name="name" type="text" class="form-control" placeholder="Username">
     </div>
     <span class="help-block" id="error"></span>
</div>

now let's create all the necessary inputs for the signup form and here is our complete html form body markup,

<body>

 <div class="container">

    <div class="signup-form-container">
    
         <!-- form start -->
         <form role="form" id="register-form" autocomplete="off">
         
         <div class="form-header">
          <h3 class="form-title"><i class="fa fa-user"></i> Sign Up</h3>
                      
         <div class="pull-right">
             <h3 class="form-title"><span class="glyphicon glyphicon-pencil"></span></h3>
         </div>
                      
         </div>
         
         <div class="form-body">
                      
            <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                   <input name="name" type="text" class="form-control" placeholder="Username">
                   </div>
                   <span class="help-block" id="error"></span>
              </div>
                        
              <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                   <input name="email" type="text" class="form-control" placeholder="Email">
                   </div> 
                   <span class="help-block" id="error"></span>                     
              </div>
                        
              <div class="row">
                        
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="cpassword" type="password" class="form-control" placeholder="Retype Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
             </div>
                        
                        
            </div>
            
            <div class="form-footer">
                 <button type="submit" class="btn btn-info">
                 <span class="glyphicon glyphicon-log-in"></span> Sign Me Up !
                 </button>
            </div>


            </form>
            
           </div>

 </div>
    

</body>

form design looks like :

jQuery Part : Validation

ok guys after creating signup form now it's time to complete it with jQuery validations, for that we need jquery plugin jquery.validate.min.js you can get it from the official site and a simpel jquery library jquery-1.11.2.min.js, so we have two js files to get work done. put the both file just above the closing </body> tag

<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="assets/jquery-1.11.2.min.js"></script>
<script src="assets/jquery.validate.min.js"></script>
<!-- javascript/jquery validations will be here  -->

</body>
</html>

create a new file as an register.js and copy/paste the following code inside the file, i have added all the input validations in this file .

// JavaScript Validation For Registration Page

$('document').ready(function()
{    
   // name validation
    var nameregex = /^[a-zA-Z ]+$/;
   
   $.validator.addMethod("validname", function( value, element ) {
       return this.optional( element ) || nameregex.test( value );
   }); 
   
   // valid email pattern
   var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   
   $.validator.addMethod("validemail", function( value, element ) {
       return this.optional( element ) || eregex.test( value );
   });
   
   $("#register-form").validate({
     
    rules:
    {
    name: {
     required: true,
     validname: true,
     minlength: 4
    },
    email: {
     required: true,
     validemail: true
    },
    password: {
     required: true,
     minlength: 8,
     maxlength: 15
    },
    cpassword: {
     required: true,
     equalTo: '#password'
    },
     },
     messages:
     {
    name: {
     required: "Please Enter User Name",
     validname: "Name must contain only alphabets and space",
     minlength: "Your Name is Too Short"
       },
       email: {
       required: "Please Enter Email Address",
       validemail: "Enter Valid Email Address"
        },
    password:{
     required: "Please Enter Password",
     minlength: "Password at least have 8 characters"
     },
    cpassword:{
     required: "Please Retype your Password",
     equalTo: "Password Did not Match !"
     }
     },
     errorPlacement : function(error, element) {
     $(element).closest('.form-group').find('.help-block').html(error.html());
     },
     highlight : function(element) {
     $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
     },
     unhighlight: function(element, errorClass, validClass) {
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
     $(element).closest('.form-group').find('.help-block').html('');
     },
     
     submitHandler: function(form) {
                    form.submit();
     alert('ok');
                }
     }); 
 })

How to Add Custom Validation Method in jQuery Validation

// name validation
var nameregex = /^[a-zA-Z ]+$/;

$.validator.addMethod("validname", function( value, element ) {
     return this.optional( element ) || nameregex.test( value );
}); 
   
// valid email pattern
var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   
$.validator.addMethod("validemail", function( value, element ) {
     return this.optional( element ) || eregex.test( value );
});

now calling the custom validation method if user input goes wrong



// rules

name: {
      required: true,
      validname: true // rule for accepts only alphabets with space
      },
email: {
      required: true,
      validemail: true // rule for accepts valid email pattern
      }

// messages : user defined messages for the custom rules.

name: {
      required: "Please Enter User Name",
      validname: "Name must contain only alphabets and space"
      },
email: {
      required: "Please Enter Email Address",
      validemail: "Enter Valid Email Address"
      }

form with validation :

now after filling all the correct details our responsive form will looks like this :

Complete Bootstrap Form with Validations

that's it, hope you guys like this. please share it with your dev friends. in the next we will see the same form with ajax registration. keep visiting.

7 comments:

Sabari Samrat6/25/2016 8:17 AM
Good work
Unknown7/09/2016 2:00 AM
thanks man
Collins Ikemefuna8/30/2016 10:41 AM
My man you are good. Your tutorial has thought me so much. God bless you bountifully.
GJ10/27/2016 12:26 AM
thanks bro for detailed explanation , along with above sign-up form how do we add social signups (facebook/twitter..etc)..
Jermain Am1/02/2017 1:06 AM
Good work. At least I could implement it on my
web design site which was needed indeed!
Unknown1/19/2017 9:29 PM
Hello, great work ! I am looking to open this form like a model box through a link. (link How can it be done ?