@UiReact

Installation

The Basics

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Utils

Contributing

Feature request

UiValidator

Package: @uireact/validator

^v2.4.1

Validator class that run checks based on a given schema into a given object. Used commonly to validate forms in client and data sets on the server side.

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/validator

V2 Released

What changed?

Usage 🎮

The validator class outputs chainable functions that can be put together to create schemas. So, First, we need to create an instance of the UiValidator

import { UiValidator } from '@uireact/validator';

const validator = new UiValidator();

Then, we will create our schema, For this we need to create an object and use validator.field() which will instantiate a class that holds all the chainable functions and sets the type of that field:

import { UiValidator } from '@uireact/validator';

const validator = new UiValidator();

const schema = {
  firstName: validator.field('text').present('First Name is required').length(0, 10, 'First name is not valid'),
  email: validator.field('email', 'The mail is not valid').present('Email is required')
};

const data = {
  firstName: 'Felipe',
  email: 'test@mymail.com',
};

const result = validator.validate(schema, data);

Once the schema is created you can simply call validator.validate() and pass your schema and data so it runs the validations set up.

Validation result

The result will follow UiValidatorResult structure. With 2 top level properties:

export type UiValidatorResult = {
  /** If validation was successful or not */
  passed: boolean;
  /** The list of errors found in the data passed keyed by the field name */
  errors?: UiValidatorErrors;
};

The errors property will have an object with a list of all errors found keyed by the field name, you can then decide how and which ones to show to your user.

NOTE: All chainable functions have a common attribute errorMessage, this overrides the default error messaging from the utility.

import { UiValidator } from '@uireact/validator';

const validator = new UiValidator();

const schema = {
  firstName: validator.field('text').present('First Name is required').length(0, 10, 'First name is not valid'),
  email: validator.field('email', 'The mail is not valid').present('Email is required')
};

const data = {
  firstName: 'Felipe',
  email: 'test@mymail.com',
};

const result = validator.validate(schema, data);

if (!result.passed) {
  const { firstName, email } = result.errors; // The errors object has keys that matches the field name of the data object passed.

  if (firstName?.length > 0) {
    console.log(`Error: ${firstName[0].message}`)
  }
}

Example 💡

Example using a component that receives the schema and the data and then renders a message if it passes:


  <ValidatorRunner
    schema={{
      age: validator
        .field('numeric')
        .present('The age is required')
        .range(25, 35, 'This only works for ppl from 25 to 35 years old'),
      firstName: validator
        .field('text')
        .present('First Name is required')
        .length(0, 10, 'First name is not valid'),
      email: validator
        .field('email', 'Email is not valid')
        .present('Email is required')
    }}
    data={{ age: 29, firstName: 'Felipe', email: 'text@mymail.com' }}
  />

Rules

All chainable rules

Conditionally running validations

Conditional checks

greaterThan() and lessThan()

This function can be used to validate numbers and dates:

Checking numbers

Checking dates

Phone validation 📱

Checking phone numbers