Coderan: Validator

The smart React element validator

Introduction

The goal of this package, is to simplify the struggle of validating elements in React, with a simple system which allows users to add their own rules.
The system communicates directly with the elements in the DOM, and is therefore widely compatible with other libraries, like Bootstrap.

The concept

Validator consists of two main elements, an Area and a Provider. Areas are a sort of wrappers having elements that need validation as their children. An area scans the underlying components and elements and indexes validatable elements.

Providers on the other hand are wrappers around areas, and allow them to communicate between each other. This communication is needed in order to match with values in other areas. It can also be used to validate all areas at once, and preventing actions to happen while not all areas are valid.

How to use

First, start with adding rules to the validator in order to use them. There are some rules pre-made, but more specific rules you have to create yourself.

import{Validator}from'@coderan/validator';import{min}from'@coderan/rules/min';Validator.extend('min',min);

Area

Basic usage:

import{ValidatorArea}from'@coderan/validator';<ValidatorArearules="required"><inputname="username"/></ValidatorArea>

When the input is focused and blurred, the required rule is called.

Every area needs a name. This name is used to index areas in the provider, and make meaningful error messages. When using multiple inputs within an area, i.e. when validating a multi-input date of birth, name prop is required when defining the ValidatorArea component. Like so:

import{ValidatorArea}from'@coderan/validator';<ValidatorArearules="min"name="dob"><inputname="day"/><inputname="month"/><inputname="year"/></ValidatorArea>

Showing errors:

import{ValidatorArea}from'@coderan/validator';<ValidatorArearules="min"name="dob">{({ errors })=>(<><inputname="username"/>{errors.length&&<span>{errors[0]}</span>}</>)}</ValidatorArea>

Provider

Basic usage:

import{ValidatorProvider,ValidatorArea}from'@coderan/validator';<ValidatorProvider>{({ validate })=>(<><ValidatorArearules="min"name="dob"><inputname="day"/><inputname="month"/><inputname="year"/></ValidatorArea><ValidatorArearules="min"name="dob"><inputname="day"/><inputname="month"/><inputname="year"/></ValidatorArea><buttononClick={()=>validate(()=>alert('valid'))}>Check</button></>)}</ValidatorProvider>

It is possible to give the validator a rules prop as well, whose rules apply to all underlying areas:

import{ValidatorProvider,ValidatorArea}from'@coderan/validator';<ValidatorProviderrules="required"><ValidatorArearules="min:5">{/* on blur, both required and min rules are applied */}<inputname="username"/></ValidatorArea></ValidatorProvider>

Adding rules

With access to validator

import{Validator}from'@coderan/validator'Validator.extend('test_types',(validator: Validator)=>({passed(): boolean{returnvalidator.refs(undefined,HTMLInputElement).length===1&&validator.refs('test1',HTMLTextAreaElement).length ===1&&validator.refs('test1').length===1&&validator.refs('test1',HTMLProgressElement).length===0;},message(): string{return'test';}}));

or without

import{getValue,isInputElement,isSelectElement}from'@/utils/dom';exportdefault{passed(elements: HTMLElement[]): boolean{returnelements.every((element: HTMLElement)=>{if(isInputElement(element)||isSelectElement(element)){constvalue=getValue(element);returnvalue&&value.length;}returntrue;})},message(): string{return`{name} is required`;}};

You can create your own rules, as long as it follows this interface:

import{Validator}from'@coderan/validator';/** * Function to access validator using the rule */declaretypeRuleFunction=(validator: Validator)=>RuleObject;/** * Object structure rules must implement */declaretypeRuleObject={/** * Returns whether the rule passed with the given element(s) */passed(elements: HTMLElement[], ...args: string[]): boolean;/** * Message shown when the rule doesn't pass */message(): string;}exporttypeRule=RuleObject|RuleFunction;

Perhaps you would like to use a different name for the message than the name-attribute. That's perfectly fine!

import{ValidatorArea}from'@coderan/validator';<ValidatorArearules="required"validationName="Surname">{({ errors })=>(<><inputname="username"/>{errors.length&&<span>{errors[0]}</span>}</>)}</ValidatorArea>

and when no value is present in the input, a message like "Surname is required" will appear.

Happy Coding!