@@include('_includes/_page-loader.html') @@include('_includes/_header/_header.html') @@include('_includes/_sidebar.html', { "group": "forms", "link": "form-validation" }) @@include('_includes/_theme-switch.html')

Form Validation Provide valuable, actionable feedback to your users with HTML5 form validation available in all supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

@@include('_includes/_page-actions.html')

Basic examples

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.

Valid stats

Looks good!

Invalid stats

Please provide a valid input

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.

Valid stats

Invalid stats

Supported elements

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

Please enter a message in the textarea.

Check this custom checkbox

Example invalid feedback text

Toggle this custom radio

Or toggle this other custom radio

More example invalid feedback text

Example invalid custom select feedback

Choose file...

Example invalid custom file feedback

@@include('_includes/_footer.html')

Basic examples

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.

Valid stats

Invalid stats

Tooltips

Valid stats

Invalid stats

Supported elements

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

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.