A collection of useful FormValidation 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
- Use events to add custom CSS class to the element: source
- Validate a native form without using any CSS framework: source
Use the Alias plugin to use multiple instances of the same validator.
Use the Aria plugin to add ARIA attributes based on the field validity.
Use the AutoFocus plugin to focus on the first invalid element when submit form.
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
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
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
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
Use the Declarative plugin to declare validator options via HTML attributes.
Use the DefaultSubmit plugin to submit the form if all fields are valid after clicking the Submit button.
Validate a field when one of its dependencies field changes
Use the Excluded plugin to ignore validations on particular field.
Use the FieldStatus plugin
- Enabling submit button only when all fields are valid: source
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
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
Integrate with the International Telephone Input
- Basic example: source
- Use with the Declarative plugin: source
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
Use the L10n plugin to support multiple locales for error messages.
Use the Mailgun plugin to validate an email address by using Mailgun API.
- Basic example: source
Use the MandatoryIcon plugin to show required icons for mandatory fields.
Use the Materialize plugin to validate the Materialize form.
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
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
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
Use the Mui plugin to validate the MUI form.
Use the PasswordStrength plugin to check the strength of a password.
Use the Pure plugin to validate the PureCSS form.
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
Use the Recaptcha3Token plugin to send the Google reCAPTCHA v3 token to the back-end when the form is valid.
- Basic example: source
Use the Recaptcha3 plugin to show and validate a Google reCAPTCHA v3.
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
Use the Sequence plugin to stop performing remaining validators if there is a validator that the field does not pass.
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
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
Use the SubmitButton plugin to validate the form when pressing its Submit button automatically.
Use the StartEndDate plugin to validate start and end dates.
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
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
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
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
Use the Turret plugin to validate the turretcss form.
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
Use the Wizard plugin to validate multiple steps form.
- 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 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
This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.
Be my friend on