Examples

Basic examples

• Can not submit form after validation
• Disable the submit button after validating a form
• Using Ajax to submit the form
• Validating form manually

Advanced examples

• Adding dynamic field
• Asking fields to be unique
• Building a password strength meter
• Clearing field when clicking the icon
• Enabling validators on the fly
• Excluding field by given condition
• Localize error messages of a custom validator
• Multiple steps wizard
• Regenerating captcha when the form is invalid
• Requiring at least one field
• Setting dynamic regular expression
• Switching validators on the same field
• Toggle validators based on the given condition
• Transform the email address validator
• Updating validator options
• Using HTML 5 inputs and attributes
• Validating checkbox list placed in multiple columns
• Validating fields placed in table cells
• Validating multiple inputs as one

Validators

• Accepting test credit card numbers
• Asking credit card number to match with selected type
• Creating a custom validator
• Disabling date
• Is a@b valid email address?
• Preventing user to have same value as the placeholder
• Requiring all options to be selected
• Showing credit card icon
• Supporting custom date format
• Terms and conditions agreement validation
• Trimming a value
• Validating an avatar URL
• Validating credit card expiration date
• Validating date range
• Validating social account URL

Customize icons and messages

• Adjusting icon position
• Changing success and error colors
• Hiding messages
• Hiding success class
• Hiding success class and icon for optional field
• Showing all messages
• Showing custom message returned from server
• Showing dynamic message
• Showing icons in custom area
• Showing messages in custom area
• Showing only one message each time
• Using FontAwesome icons
• Using Glyphicons icons
• Using Material Design icons
• Using Semantic UI framework icons
• Using Spectre framework icons
• Using SVG icons

Improve user experience

• Enabling submit button only when all fields are valid
• Getting notified while field is being validated
• Pending validation for a given number of seconds
• Performing validation if field value exceed given number of characters

Integrate with JavaScript frameworks

• Bundling with Rollup
• Bundling with Webpack
• Integrating with Inferno
• Integrating with Mithril
• Integrating with Preact
• Integrating with RE:DOM
• Integrating with React
• Integrating with Riot
• Integrating with Svelte
• Integrating with Vue

Integrate with 3rd party libraries

• Integrating with 3rd party libraries
• Integrating with Bootbox
• Integrating with Bootstrap button group
• Integrating with Bootstrap Datepicker
• Integrating with flatpickr
• Integrating with MagicSuggest
• Integrating with Select2
• Integrating with Summernote
• Integrating with TinyMCE
• Using flatpickr for start and end dates