form-validation / examples

A collection of useful FormValidation examples

FormValidation examples

A collection of useful FormValidation examples

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

• Twitter
• dev.to
• Github