Form Validation

Browser Default

Browser default validation with using the required keyword. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.

First name

Last name

Username

City

State

Zip

Agree to terms and conditions

Custom Styled Validation

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Custom Styled Validation with Tooltips

If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

First name

Last name

Username

City

State

Zip