react-validation-handler

React-Validator-Handler

This React package is for validate separated form fields using namespaces.

Getting Started

npm

npm i react-validation-handler

yarn

yarn add react-validation-handler

Usage

basic :

//Form1 component
import React from 'react';
import ErrorHandler from 'react-validation-handler'
 
...
let input1 = '';
...
  // <ErrorHandler /> accept `rules` attribute by default has an object {required: true}
  // `namespace` and `id` attributes are required so `react-validation-handler` can track that specific instance
  // `body` attribute hold content component ( in our example it's a <input />)
  <ErrorHandler
    value={input1}
    namespace="form1"
    id="form1Input1"
    body={({updateValue}) => {
      return (
        <input onChange={e => {
          input1 = e.target.value;
          // updateValue to track var changes
          updateValue(input1);
        }}/> 
      )
    }}
  />
...
 
//AppComponent
 
import Form1 from '/path/to/Form1';
import { ErrorHooks } from 'react-validation-handler'
 
...
  <Form1 />
 
  <button onClick={ _ => {
    // validate method to check if all fields under a specific `namespace` are good
    ErrorHooks.validate('form1').then( (hasErros, errors) => {
      // hasError : Boolean
      // errors: has object with all `id`s of fields that has error
    });
  }}>validate form1</button>
...
 

validate a target field

...
  <Form1 />
 
  <button onClick={ _ => {
    // check method to check if the specified field meet rules requirements
    ErrorHooks.check('form1Input1').then( (hasError, errors) => {
      // hasError : Boolean
      // errors: has `id` of fields that has error
    });
  }}>validate form1Input1</button>
...
 

ErrorHandler

property	required	default	description
body	true	-	component body //input, textarea, ...
namespace	true	-	to identify field group name
value	true	-	current field value
id	true	-	current field id
rules	false	{required: true}	rules for current field (only number, email are available for now)

Rules

rule	type	default	description	Status
required	Boolean	true	set field to required	DONE
email	Boolean	false	set field as email, it should be a valid email	DONE
char	Boolean	false	set field as string, it's only valid valid names {/^[A-Za-z-' ]+$/}	DONE
number	Boolean	false	set field as number, it should be a valid number	DONE
equalTo	String	''	set field to equal another ErrorHandler Field ID "	DONE
pattern	object	{}	object with two keys regex to test the entred value and message to be displayed in case error	DONE
min	Number	-1	field value length should be greater or equal to min value	DONE
max	Number	-1	field value length should be less or equal to min value	DONE