Validation

Overview

A lightweight, schema-based validation composable for Vue 3. It takes a more holistic approach to asynchronous validation.

See the README for full details.

At a Glance

• Schema-based. Import rules and structure, keeping the component lean
• Flexible. Simply provide the validation composable with rules + values
  • no "black box" set up: use the component's data directly and provide rules elsewhere. Or:
  • lean: sweep away both rules and values into a schema config
• Reactive. User input triggers validation updates and display
• Extensible. Easy to override and add new rules
• De-coupled. The reactive form-object can be injected directly into your actions
• Agnostic. Can consume validation errors generated on either client or server
  • client-side: validators from Vuelidate are leveraged, sharing prior-art
  • server errors: may also be used to hydrate the validation composable. Uses the JSON error format by default

Examples

note: examples use `@input` to evaluate immediately. you may prefer to use @change

{{ form.username }}

{{ form.email }}

{{ form.password }}

{{ form.samePassword }}

References

Validatable draws inspiration from multiple sources.

• Vue Composable: Vue 3 composition API approach to validation
• Vee Validate: Vue 3 composition API + "validation provider" component
• Vuelidate for model based validation
• Vuetify: Array validation approach