Hit enter after type your search item

jQuery form validation with Bootstrap: 4 examples

The jQuery validate plug-in for HTML forms

The form validation is generally required as using the web forms in your web pages. For example, checking the correct email format, password and re-enter password matching, name, age etc fields values (if any are mandatory).

In early days, you had to write a lot of code of JavaScript for client-side validation or server side validation by using PHP, ASP.net etc.

In this tutorial, I am going to show you a jQuery based form validation plug-in that allows you to check not only the required fields but it also checks email validation, limit of characters, and may also compare two fields.

A demo of basic form validation by jQuery

In this jQuery form validation example, three form fields are checked whether these are filled or not. Although the email field is also used, however, its format is not checked. It only checks for a character entry. For email validation example, see next examples.

Also note, for all the examples, Bootstrap framework is used for creating the forms. You may use your own custom CSS for creating forms as using this plug-in.

jquery validate

See online demo and code

For setting up this jQuery validate form plug-in, you need to include a few resources in the <head> and before the </body> tag.

First of all, include the Bootstrap and style CSS files that come up with the plug-in. You may download the plug-in from the Github website here. Alternatively, view source the demo page and find the required files and save in your system.

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

<link rel=”stylesheet” type=”text/css” href=”css/bsvalidate/style.css”>

The markup containing the form and using required ID:



Just above the </body> tag, place the references to the jQuery, Bootstrap, and plug-in JS files:

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

<script type=”text/javascript” src=”js/bsvalidate/jquery.bsvalidate.js”></script>

<script type=”text/javascript” src=”js/bsvalidate/main.js”></script>

The main.js file contains the specification related to demos. You may change this if you want to use some other IDs, alert messages etc.

A demo of validating email

In this example, not only the emptiness of email field is checked but its format as well. A user must enter the “@” and “.” with certain characters in order to proceed. You may show any custom message for incorrect entry. Give it a try:

jquery validate email

See online demo and code

The markup used in the demo:


A demo of showing custom error messages

You may also show custom messages as you want while using this validate jQuery plug-in. For that, you need to access the main.js file and change/add any messages for respective form fields. Have a look at the following demo where different form fields are used.

The Name and Email fields are mandatory while if website format is incorrect, it will display the alert message. Just like above example, the format of the email is checked. In addition to the validating the email address, the re-enter email field is also checked for entry as well as matching the two email addresses.

Have a look:


See online demo and code

The markup used:


Make sure, using the same ID (customMessagesForm) in the <form> field as it is used in the main.js file. If you intend to use another then change this in the main.js file as well.

The demo of filling at least one field check

In this example, the check is to validate at least one form field is filled from two or more text boxes. Four text fields are given and if all are left blank, the error message will display stating that “Enter at least one field”. See the demo by clicking the link or image below:

jquery validation one field

See online demo and code

You may see and get the code from the demo page.

This div height required for enabling the sticky sidebar