use-validate-form

This package exposes useFormValidation, a custom react hook for validating form input.

Usage

You can import and use useValidateForm like this:

1import {
2  useValidateForm,
3  isRequired
4} from 'use-validate-form'
5
6const fields = {
7  name: {initialValue: '', validators: [isRequired], type: 'string'}
8  age: {initialValue: '', validators: [isRequired], type: 'number'}
9}
10
11const [
12  {
13    fields: { name, age },
14    isValid,
15    hasErrors,
16  },
17  dispatch
18] = useValidateForm(fields)
19

Each item in the validators arrays must be an objects with a) a func property which takes the new value, the field's type, and an object containing all fields as arguments, and returns true or false and b) an error property which is a string that will explain to a user why their input is invalid.

1(value, type, allFields) => value > allFields.otherField.value

Each of the field objects returned by useValidateForm (i.e. name, age) have the following properties:

1const {
2  value, // value of field
3  type, // string
4  isValid, // boolean
5  isDirty, // boolean
6  errors, // array of strings
7  name, // string
8  validators // array of validtor objects
9} = age

The dispatch function takes an action of type SET_VALUE or VALIDATE. This allows you to set the value of a field onChange event but only validate (show errors) onBlur.

1<input
2  onChange={(event) => dispatch({type: 'SET_VALUE', {name: 'age', value: event.target.value}})}
3  onBlur={(event) => dispatch({type: 'VALIDATE', {name: 'age', value: event.target.value}})}
4/>

The name property of the action must match the name property from the field which was originally passed into useValidateForm.