Validation

Bootstrap provides a few classes to give feedback when validation instances take place.

Validation Classes

• needs-validation
  • valid-feedback invalid-feedback
  • is-invalid is-valid

Try it

There are a few special classes for dealing with validation. Remember that by default every browser has it's own HTML validation feedback so in order to get this to work, you're going to need to turn that off.

To do that, we can add a class of needs-validation to our form and you also need to add the novalidate property so that the browser doesn't take over.

Inside our form, you can use two additional classes called valid-feedback and invalid-feedback wherever you want the feedback to appear if someone doesn't fill out the field properly. So in our example, I'm using the required property for this input and then adding valid and invalid feedback.

Bootstrap will take care of adding the is-invalid or is-valid classes depeding on wether you filled out the input properly. You can target those classes if you want to customize things.

This also requires you to add some JavaScript which I've placed here that will make everything work. This javascript will go through all the forms in the page, prevent the form submission and activate the feature on any form on the current page.