Form Validation

Custom styles

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>.

Valid Status

You can denote a valid status by applying a helper text with the class .valid-feedback.

Looks good!
Looks good!
Looks good!

Invalid Status

You can denote a invalid status by applying a helper text with the class .invalid-feedback.

Enter your name!
Enter a valid email address!
Password is not strong enough!

Supported elements

Validation styles are available for the following form controls and components.

Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid select feedback
Example invalid form file feedback

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.

Looks good!
Looks good!
Looks good!
Enter your name!
Enter a valid email address!
Password is not strong enough!