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
- 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
- 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.
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.
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.
