useValidation

useValidation(functions: Array) provides the validation logic to any Field.

const [status, validation] = useValidation([fn1, fn2, ...fnN])

Arguments

functions: array

• A validation function is a pure function which receives the field value and checks whether the value is valid or not, returning undefined or null if it is valid, or a string with some custom message if it is not valid.

Returns

(validationProps): array

An array that holds:

• status: object

A plain object that holds a prop named error. The value of error might be "undefined", if all validation functions have passed the validation with success, or a "string" if one of the validation functions returns an error message.

• validationAttr: object

A plain object which contains all the props that must be spread to the field.

Basic usage

import { Form, Input, useValidation } from 'usetheform'

Preview

Live Editor

function FormWihSyncValidation() {
  const required = value => (value && value !== "" ? undefined : "Required");
  const [status, validationAttr] = useValidation([required]);
  return (
    <Form>
      <Input type="text" name="username" touched placeholder="Username" {...validationAttr} />
      {status.error && <label className="vl">{status.error}</label>}
    </Form>
  )
}