Designing Bootstrap Signup Form with jQuery Validation | Coding Cage

Designing Bootstrap Signup Form with jQuery Validation

By
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.
Designing Bootstrap Signup Form with jQuery Validation


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 :
Bootstrap Form Design

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 :
Form Design View 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.



6 comments:

  1. Replies
    1. thank you, Sabari, Glad you liked it :)

      Delete
  2. My man you are good. Your tutorial has thought me so much. God bless you bountifully.

    ReplyDelete
  3. thanks bro for detailed explanation , along with above sign-up form how do we add social signups (facebook/twitter..etc)..

    ReplyDelete
  4. Good work. At least I could implement it on my
    web design site which was needed indeed!

    ReplyDelete