How to Validate Forms with Bootstrap

Validation is one of the biggest priorities for your website's forms. 

There are a few key things you need to validate with each form: 

1) Required information

This is easily the most important form sections that should be validated. The required information sections are how those engaging with your form tell you the most important aspects of themselves. Without gaining this information, the form is effectively useless for your information. 

There are two common ways to indicate that a form field is required. First, you can put an asterisk (*) next to a particular field. Those are common among web users, and most of them will know that in order to submit a form, they'll need to include those particular elements. However, some people aren't accustomed to seeing asterisks in places. A second way to indicate a required field is to include the word "required" next to the form field information. 

2) Correct format

While you'll certainly want your form users to fill out the required information, you'll also want that information in the correct format. Validating for format applies to things like email addresses, dates, phone numbers, and other elements of 'structured' information. 

However, it's often more beneficial to both the user and your website not to be too strict about information formatting. Give the user some reasonable leeway in formatting -- and tap into forgiving format UI design. If there is a particular field that needs to be in a structured format, then use the validation to guide users into an acceptable format. 

3) Confirmation fields

People like knowing their information is secure, especially if it's on the internet. When dealing with data important to your website or business, it's also good to have more security that you're getting the right information from form users. Confirmation fields give your users an opportunity to ensure that data like passwords or an email account doesn't have a typo and that what they typed into a field really was what they intended to include. Confirmation fields are exceptionally helpful when placed below the target form field, and they often include text describing its purpose. 

While default HTML 5 can be used to validate website forms, it's got its shortcomings. You'll probably need a way to customize the validation error messages and customize error styles to match other visual elements. Bootstrap is one of the most efficient tools for getting the job done. Luckily for us, there's a Bootstrap validation extension by GitHub user @1000hz.

Here's how to validate forms using Bootstrap: 

HTML

One of the most important components is to attach the 'role="form" data-toggle="validator"' parameters to your form. Additionally, each input should have the "required" attribute, the "data-error" attribute, and the "help-block" div where error messages will be specified.

CSS

A little CSS to help style your form in addition to the ".has-error" class which will create the red borders around the various inputs that need to be validated.

Includes

In addition to jQuery and Bootstrap includes, make sure to include the validator JS file.

With all of those components, you will have a contemporary validation method for your forms. View the fiddle below to see how the validation operates. Trying to submit a required field while empty will prompted the specified error message. Additionally, the submit button is even disabled until all required fields have been filled-in.