Top 2 bootstrap form validation with example code

bootstrap form validation

bootstrap form validation

Example one # with bootstrap validator:

Best way to bootstrap form validation is using bootstrap validator jQuery plugin. Looks pretty nice, with Bootstrap Glyphicons and run time validation. It’s easy to install and they’ve CDN support, support other plugin and well decorated documentation.

Form on action :


The HTML :

CDN files adding for validation support library :

The JavaScript :



Live Demo

Download code

Example 2 # With JQuery

Solution of bootstrap form validation with JQuery is really easy. JQuery is a wonderful tool to validate any form & its works OK with bootstrap. To create a fancy form validation – JQuery is a must. We’re discussing here about it step by step. We’ll create a registration form & validate it with JQuery.

Here is a video about bootstrap form validation on action :

Creating a bootstrap form:

We’re creating some files & folder to organize and work with the files. They are as follows:

  • index.html
  • style.css
  • script.js
  • assets (folder)
    • CSS
      • bootstrap.min.css
      • bootstrap-responsive.min.css
    • img
      • checked.gif
      • error.png
      • valid.png
    • js
      • jquery.validate.js
      • jquery.validate.min.js
      • jquery-1.7.1.min.js

We create a form CSS id to work with JQuery. And we called it ‘registration-form’. And also some classes like : control-group,control-label controls. Each row named with control-group. Sample HTML  codes

The Bootstrap form has been created.

Working with JavaScript bootstrap form validation:

To validate bootstrap form, we need to attach JQuery library.  We’ll include jquery-1.7.1.min.js, jquery.validate.js and script.js. The code will be :


Here’s something important – if you want to add field in form, you need to create function on script.js. You’ve to create rules for adding new type of form. Example: if you want to add a field named ‘Secret Question’ – your HTML id will be ‘secret_question’. And the rules for validation code will be :


bootstrap form validation

bootstrap form validation on action

Here : you can set any number of words you want.And also if it’s not a required field : you’ve to change – required: false. Bootstrap form validation with JQuery is complete, leave your comments bellow.

bootstrap form validation : Live Demo

bootstrap form validation : Download code

bootstrap registration form template free download

Thanks to :

Share this post with others.