form-validator-react

React hook for form validation Made with create-react-library

Install

npm install --save form-validator-react

or

yarn add form-validator-react

Features

Validation hook offers field and cross-field validation:

• required
• requiredTrue
• requiredValue
• min
• max
• minLength
• maxLength
• email
• pattern
• equal (cross-field validation)
• notEqual (corss-field validation)
• biggerThan (corss-field validation)
• lowerThan (corss-field validation)

Demo and documentation

Demo source code

Demo

For validation we use validation hook "useValidation". As argument we pass .js or .ts config file.

  const { useGetValue, isFormValid, validity, formValues } = useValidation(config);

Acceptable fields and types for config file:

type ValidationConfig = {
  fields: {
    [key: string]: {
      required?: {
        message: string
      },
      requiredTrue?: {
        message: string
      },
      requiredValue?:{
        value: number | string | boolean;
        message: string
      },
      min?: {
        value: number,
        message: string
      },
      max?: {
        value: number,
        message: string
      },
      email?: {
        message: string
      },
      minLength?: {
        value: number,
        message: string
      },
      maxLength?: {
        value: number,
        message: string
      },
      pattern?: {
        value: RegExp,
        message: string
      },
      equal?: {
        fieldname: string,
        message: string
      },
      notEqual?: {
        fieldname: string,
        message: string
      }
      biggerThan?: {
        fieldname: string,
        message: string
      },
      lowerThan?: {
        fieldname: string,
        message: string,
      }
    }
  }
}

Hook returns:

• useGetValue - Hook for getting data from input.
• isFormValid - Boolean that resolves if all form (fields) are valid or not
• validity - Object with info and error message for each field of form
• formValues - Object with values that are inserted by user

Usage example

import React from 'react';

import { useValidation } from 'form-validator-react';
import { ValidationConfig } from 'form-validator-react/dist/types';

import '../styles.css'

export const Form = () => {

  const config: ValidationConfig = {
    fields: {
      username: {
        required: { message: 'Field is required' },
      },
    }
  };

  const { useGetValue, isFormValid, validity, formValues } = useValidation(config);
  
  // formValues object contains values inserted to form by user

  return (
      <form className="form">
        <h3 className="validation-rule">- required</h3>

        <div className="field-wrapper">
          <label className="label" >User name</label>
          <input
            className={`input ${ validity['username']?.isError ? 'error' : ''}`}
            type="text"
            {...useGetValue('username')} />

          { validity['username']?.isError &&
          <div className="message">
            {validity['username']?.message}
          </div>}
        </div>

        <button className="button" disabled={!isFormValid}>Submit</button>
      </form>
  );
};

export default App;

License

MIT ©