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

or using Yarn:

$ yarn add @lysyi3m/stimulus-use-validation

Usage

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