FormValidation examples

A collection of useful FormValidation examples

FormValidation

APIs examples

Clearing field when clicking the icon: source, live demo
Send the form data to the back-end via an Ajax request:
- Use the axios library: source
- Use the jQuery.ajax method: source

Native forms

Use events to add custom CSS class to the element: source
Validate a native form without using any CSS framework: source

Plugin examples

Alias plugin

Use the Alias plugin to use multiple instances of the same validator.

Basic example: source, live demo

Aria plugin

Use the Aria plugin to add ARIA attributes based on the field validity.

Basic example: source, live demo

AutoFocus plugin

Use the AutoFocus plugin to focus on the first invalid element when submit form.

Basic example: source, live demo
The page has a fixed header: source

Bootstrap plugin

Use the Bootstrap plugin to validate the Bootstrap 4 form.

Add icons to tab: source
Bootstrap 4 form without labels: source, live demo
Bootstrap 4 horizontal form: source, live demo
Bootstrap 4 inline form: source, live demo
Bootstrap 4 stacked form: source, live demo
Send an Ajax request when the form is inside a modal: source
Use custom checkboxes: source
Use custom select: source
Use multiple checkboxes: source
Use multiple fields in the same row: source, live demo
Use multiple radio buttons: source
Validate a form that inside a modal: source

Bootstrap3 plugin

Use the Bootstrap plugin to validate the Bootstrap 3 form.

Bootstrap 3 form without labels: source, live demo
Bootstrap 3 horizontal form: source, live demo
Bootstrap 3 inline form: source, live demo
Bootstrap 3 inline radio: source
Bootstrap 3 stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Bootstrap5 plugin

Use the Bootstrap5 plugin to validate the Bootstrap 5 form.

Bootstrap 5 floating labels: source
Bootstrap 5 form without labels: source, live demo
Bootstrap 5 horizontal form: source, live demo
Bootstrap 5 inline form: source, live demo
Bootstrap 5 stacked form: source, live demo
Use multiple fields in the same row: source, live demo
Use Bootstrap 5 validation icons: source
Validate a form that inside a modal: source

Bulma plugin

Use the Bulma plugin to validate the Bulma form.

Bulma horizontal form: source, live demo
Bulma stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Declarative plugin

Use the Declarative plugin to declare validator options via HTML attributes.

Basic example: source, live demo

DefaultSubmit plugin

Use the DefaultSubmit plugin to submit the form if all fields are valid after clicking the Submit button.

Basic example: source
Prevent form from submitting when pressing the Enter key: source

Dependency plugin

Validate a field when one of its dependencies field changes

Basic example: source
Compare fields example: source

Excluded plugin

Use the Excluded plugin to ignore validations on particular field.

Basic example: source, live demo
The excluded option: source

FieldStatus plugin

Use the FieldStatus plugin

Enabling submit button only when all fields are valid: source

Foundation plugin

Use the Foundation plugin to validate the Foundation form.

Foundation horizontal form: source, live demo
Foundation stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Icon plugin

Use the Icon plugin to display various icons based on the field validity.

Adjust icon position: source, live demo
Show icons in custom area: source, live demo
Use FontAwesome icons: source, live demo
Use Glyphicons icons: source, live demo
Use Material Design icons 1: source, live demo
Use Material Design icons 2: source, live demo
Use Semantic UI framework icons: source, live demo
Use Spectre framework icons: source, live demo
Use SVG icons: source, live demo
Use UiKit framework icons: source, live demo

InternationalTelephoneInput plugin

Integrate with the International Telephone Input

Basic example: source
Use with the Declarative plugin: source

J plugin

Use the J plugin to use FormValidation as a jQuery plugin.

Basic example: source
Validate the form manually when clicking its Submit button: source
Trigger the event when the form is valid: source

L10n plugin

Use the L10n plugin to support multiple locales for error messages.

Switch between different locales: source, live demo

Mailgun plugin

Use the Mailgun plugin to validate an email address by using Mailgun API.

Basic example: source

MandatoryIcon plugin

Use the MandatoryIcon plugin to show required icons for mandatory fields.

Basic example: source
Use with Bootstrap 3: source

Materialize plugin

Use the Materialize plugin to validate the Materialize form.

Materialize stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Message plugin

Use the Message plugin to display the error messages.

Customize the error message placement: source
Display a dynamic error message: source
Display an error message for multiple checkboxes: source

Milligram plugin

Use the Milligram plugin to validate the Milligram form.

Milligram horizontal form: source, live demo
Milligram stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Mini plugin

Use the Mini plugin to validate the mini.css form.

Mini horizontal form: source, live demo
Mini stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Mui plugin

Use the Mui plugin to validate the MUI form.

MUI stacked form: source, live demo
Use multiple fields in the same row: source, live demo

PasswordStrength plugin

Use the PasswordStrength plugin to check the strength of a password.

Create a progress bar: source
Basic example: source, live demo
Display custom messages: source

Pure plugin

Use the Pure plugin to validate the PureCSS form.

Pure horizontal form: source, live demo
Pure stacked form: source, live demo

Recaptcha plugin

Use the Recaptcha plugin to show and validate a Google reCAPTCHA v2.

Invisible reCAPTCHA: source, live demo
reCAPTCHA widget: source, live demo
Backend verification using php curl: source

Recaptcha3Token plugin

Use the Recaptcha3Token plugin to send the Google reCAPTCHA v3 token to the back-end when the form is valid.

Basic example: source

Recaptcha3 plugin

Use the Recaptcha3 plugin to show and validate a Google reCAPTCHA v3.

Basic example: source, live demo

Semantic plugin

Use the Semantic plugin to validate the Semantic UI form.

Semantic UI horizontal form: source, live demo
Semantic UI stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Sequence plugin

Use the Sequence plugin to stop performing remaining validators if there is a validator that the field does not pass.

Basic example: source, live demo

Shoelace plugin

Use the Shoelace plugin to validate the Shoelace form.

Shoelace horizontal form: source, live demo
Shoelace stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Spectre plugin

Use the Spectre plugin to validate the Spectre form.

Spectre horizontal form: source, live demo
Spectre stacked form: source, live demo
Use multiple fields in the same row: source, live demo

SubmitButton plugin

Use the SubmitButton plugin to validate the form when pressing its Submit button automatically.

Basic example: source, live demo
The submit button is outside of the form: source

StartEndDate plugin

Use the StartEndDate plugin to validate start and end dates.

Basic example: source, live demo

Tachyons plugin

Use the Tachyons plugin to validate the Tachyons form.

Tachyons horizontal form: source, live demo
Tachyons stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Tooltip plugin

Use the Tooltip plugin to show error messages in tooltips.

Basic example: source, live demo
Display tooltips at the given placement: source
Use with Bootstrap 3: source
Use with Tachyons: source

Transformer plugin

Use the Transformer plugin to modify the field value before doing validation.

Use with numeric validator: source, live demo
Use with phone validator: source, live demo
Use with uri validator: source, live demo
Use with WYSIWYG editors: source, live demo

Trigger plugin

Use the Trigger plugin to indicate the events which the validation will be executed when these events are triggered.

Basic example: source, live demo
Pending validation for a given number of seconds: source, live demo
Performing validation if field value exceed given number of characters: source, live demo

Turret plugin

Use the Turret plugin to validate the turretcss form.

turretcss stacked form: source, live demo

UiKit plugin

Use the Uikit plugin to validate the Uikit form.

Uikit horizontal form: source, live demo
Uikit stacked form: source, live demo
Use multiple fields in the same row: source, live demo

Wizard plugin

Use the Wizard plugin to validate multiple steps form.

Basic example: source, live demo

Integrate with JavaScript UI libraries

Integrate with Bootstrap Select: source
Integrate with Bootstrap Show Password: source
Integrate with Magicsuggest: source
Integrate with selectize: source
Integrate with SecureSubmit: source
Integrate with Select2: source
Integrate with SmartWizard: source
Integrate with tagify: source
Integrate with ZeroBounce: source

Integrate with JavaScript frameworks

Integrate with Mithril: source, guide
Integrate with Preact: source, guide
Integrate with React: source, guide
Integrate with RE:DOM: source, guide
Integrate with Riot: source, guide
Integrate with Vue: source, guide

Misc

Use with requirejs: source
Use with webpack: source

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

examples examples copied to clipboard

Metadata