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 :

bootstrap-form-validation-1

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 : http://jqueryvalidation.org


  • Anand

    Hi Mujahidul,

    Great work with the tutorial. Thanks.
    If one need to add additional validation for name – accept only alphabets, then how to go about it.
    Thanks

    • Dipali Patil

      you got answer for this ?
      i am looking for same code

  • Raghavendra Mudenur

    Hi . ., I am using this tutorial for my project but I am not getting valid image after a text box is validated . . Pls help me in this . .

  • Pugazh Veerasamy

    Hi Mujahidul,
    Very good demo, its good. But one thing I found was the live demo you have provided doesn’t highlight the controls and labels in green or red based on the validation. Am I missing something?
    Thanks

  • bscheller

    It appears there is a bit of CSS that may not be present. From the demo, I added the following to my CSS to get the pieces I needed:

    label.error {

    font-weight: bold;

    color: red;

    padding: 2x 8px;

    margin-top: 2px;

    }

    label.valid {

    width: 24px;

    height: 24px;

    background: url(/assets/img/valid.png) center center no-repeat;

    display: inline-block;

    text-indent: -9999px;

    }

  • shanu shaji

    there will be a problem.. when the field is empty.. it shows the validation on submit click and that time it’s working the save function also…

    then whats the purpose of validation?????

    just put a alert in the save function and run it …

    Please provide a valid one…

    And also it’s looking grate.. 🙂

  • canflyblog

    Have you revised this for bootstrap 3?

  • Ovet Kabeza

    my wife needed to fill out VA 21-4138 some time ago and came across a great service with a searchable forms database . If you want VA 21-4138 also , here’s a https://goo.gl/lcYvje

  • Damien Mccaw

    My business partners were needing TX Direct Deposit Sign-up & Change Form for Vendors earlier this week and were informed about an online service that hosts a ton of fillable forms . If others need to fill out TX Direct Deposit Sign-up & Change Form for Vendors too , here’s https://goo.gl/bmWpWS

  • GRAHAM COMO

    Good article, Thanks!

  • edo

    is there a validator for numbers-only? Where can I find more information?
    Edit: On the source code I can see what I was looking for, but it would be nice if there were more info online

  • Rudy McDaniel

    Is there an easy way to include recaptcha v2 with validation prior to form submission? I would appreciate any help. I was able to get the form to write to a database but unable to add recaptcha validation. Thanks in advance.




row end -->