1.3.0 • Published 3 years ago
@lysyi3m/stimulus-use-validation v1.3.0
stimulus-use-validation
Lightweight, zero dependency, customizable mixin for Stimulus to handle form validation easily. Heavily rely on Constraint Validation API with support for custom validators.
Installation
$ npm install --save @lysyi3m/stimulus-use-validationor using Yarn:
$ yarn add @lysyi3m/stimulus-use-validationUsage
import { Controller } from 'stimulus'
import useValidation from '@lysyi3m/stimulus-use-validation'
export default class extends Controller {
connect() {
useValidation(this, {
// options
})
}
}Options
| Option | Description | Default value |
|---|---|---|
disable | Disable submit button if there are any errors | true |
errorClassName | Class name attached to invalid form control | "" |
errorSelector | Selector to match DOM element, where validation message will be rendered | .help-block |
form | HTMLElement which form validation will be attached to. this.element if not specified | undefined |
parentErrorClassName | Class name attached to DOM element, containing invalid form control | has-error |
parentSelector | Selector to match DOM element, contain form control and error container elements | .form-group |
validators | Custom validators, mapped like '[field_name]': validatorFunc | {} |
Validators
Custom validators are functions, which accept two arguments: field and form (useful for complex validations implementation, based on several form fields) and return an object like { isValid: Bool, message: String }
Example:
const customPasswordValidator = (field, form) => {
const isValid = field.value !== 'password'
const message = "Password should not be 'password'"
return { isValid, message }
}