3 Demos of jQuery / JavaScript based form validation with Bootstrap

The form validation library

The javascript.validation is a form validation plug-in that is based on jQuery and implemented on Bootstrap framework.  It works with Bootstrap 2+ version. You may set the Bootstrap version in the global variables along with the font-awesome library.

The font-awesome icons can be used with the form fields as per the context of the input type.

If required information is not entered, the form-validation plug-in may display validation messages in a modal window or ordinary alert. You may set that option easily as shown in the section below.

Demo 1 Demo 2
Developer’s page Download plug-in

Installing the jQuery form validation plug-in

Get the validation.js file after downloading it from the above link and place it before the jQuery file. As the form is built by the Bootstrap framework and also requires the modal component, so you have to include the Bootstrap CSS and JS files:

<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script>

<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script>

<script src=”js/validation/validation.js”></script>

Place JS files before body closing tag for better performance.

Include CSS files in the <head> section:

<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css”>

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet”>

<link rel=”stylesheet” href=”css/validation/forms.css”>

In the markup

You may set a field as required that needs to be validated before the form is submitted to the server. For example:

 

Alternatively, you may use the required class in the container with that input field:

 

The data-title attribute acts as the message to be shown to the visitor in the modal or alert if required field is not validated.

See the demos below with the set of input fields like Name, email, passwords, multi-select dropdown etc.

A demo of Bootstrap validation form

In this example of showing the form validation by using jQuery, the simple-validation class is assigned to the form tag. That means the validation message will appear in a modal window.

<form class=”form-horizontal simple-validation” id=”frmExample” novalidate>

The required attribute is used at the wrapper element which is a div rather than to the input field.

Open the demo by the link or image below and press the “Save Info” button without entering any information to see how it works:

jQuery form validation

See online demo and code

A demo of showing alert rather a modal

Only the simple-validation class is replaced by the simple-validation-alert class in the <form> tag. If any required field is left empty or failed to validate, the message will appear in the alert:

jQuery form validation alert

See online demo and code

This line is changed in above example:

<form class=”form-horizontal simple-validation-alert” id=”frmExample” novalidate>

See the complete code on the demo page.

A demo of using required class in the input field

In the following demo, the required class is used in the input field rather parent element containing it. The difference that you can see here is the (*) mark appearing with the required field. Have a look:

See online demo and code

The markup for this demo:

 

See the complete code on the demo page.