React Hook - useFormInputValidation

A hook for validating form input

Get Started

Installation

npm install use-form-input-validation --save

Prerequisites

You need to provide the curry function with a yup schema for validation of each specific field.

Usage

The hook maintains its own state and returns a tuple consisting of [0] a curry function used to create onBlur handlers and [1] a function to retrieve a potential error.

The curry function takes four values:

1. A unique id.
2. A value to validate.
3. A validator function that takes a value and returns a boolean value, either true or false.
4. A custom error message to render on error.

Example

import React from 'react';
import * as yup from 'yup';
import { useValidation } from 'use-form-input-validation';

const renderError = errorMessage => {
  return errorMessage ? <div className="form__error-message">{errorMessage}</div> : null;
};

const HelloWorld = () => {

    const [value, setValue] = useState('');
    const [otherValue, setOtherValue] = useState('');

    // Apply hook
    const [fieldChecker, getError] = useValidation();
    
    return (
        <input
          type="text"
          id="some-id"
          placeholder={'some placeholder'}
          value={value}
          onChange={setValue}
          onBlur={fieldChecker(
            'some-id',
            value,
            (inputValue) => yup
              .string()
              .notOneOf([''])
              .required()
              .validateSync(inputValue),
            'Please enter a value',
          )}
        />

       // Render error 1
       {renderError(getError('some-id'))}

        <input
          type="text"
          id="some-other-id"
          placeholder={'some placeholder'}
          value={otherValue}
          onChange={setOtherValue}
          onBlur={fieldChecker(
            'some-other-id',
            otherValue,
            (inputValue) => yup
              .string()
              .notOneOf([''])
              .required()
              .validateSync(inputValue),
            'Please enter some other value',
          )}
        />

       // Render error 2
       {renderError(getError('some-other-id'))}
    );
}