Bootstrap validation with custom error message by using jQuery

The form validation in Bootstrap

In HTML 5, the default form validation is done for the fields marked with the required attribute. It will even check the email format for the field specified as type=”email” with the required attribute.

However, the message is basic and displayed as:

“Please fill in the field”

Where the specific field will also get focus as you try to submit the form.

Simple validation demo
Custom error message demo

As using the Bootstrap framework for creating the forms, the same default validation is applied. If you want to customize the validation messages for the form fields like displaying the field related message:

“You must enter your name” etc.

You may use JavaScript / jQuery for that. See the following section for simple and custom form validation using Bootstrap framework with jQuery.

Do you know? In Bootstrap 4, there is built-in support for the form validation with custom messages without using the jQuery. You simply require adding the Bootstrap 4 CSS and write a little JavaScript code. You can see an example here. For full tutorial about forms in Bootstrap 4 including validation go to this tutorial: Bootstrap 4 forms

A demo of simple form validation

In this demo, the Bootstrap form validation is done by using the default behavior. Only the required attribute is added for the fields. Go to the demo page and press the submit button and see how validation message appears:


54.0_1-bootstrap-validation

bootstrap email validate

See online demo and code

The markup for this demo:

 

You can see, only adding the required attribute will not let move ahead if the field is left blank. In the case of email address, the format of the email is also checked as shown in the second graphic.

Also, you saw the standard messages are shown i.e. “Please fill in this field” with an icon.

A demo of Bootstrap form validation with jQuery for custom error message

In this demo, a jQuery plug-in is used for validating Bootstrap form. A number of different types of fields are used in the form. For displaying a custom error message rather a single standard message you may use the data-error-msg attribute with each input type. For example, for the name field, you may specify the following message by using the data-error-msg data attribute:

“Please enter the name!”

Similarly, you may specify the message according to the field.

bootstrap validate eror message

See online demo and code

The code:

 

The jQuery code:

 

 

You can see, I have used the textboxes for the name and email while radio buttons and checkboxes are also used. The radios are optional while you have to check at least one checkbox. If all is well, the alert will display the following message:

“Hurray, your information will be saved!”

Otherwise, the error message will keep on displaying.

The validate plug-in

You may download this nice plug-in from the GitHub website here. After downloading, just include the validate-bootstrap.jquery.min.js file after referencing the jQuery and Bootstrap JS files.