@comparaonline/ui-validator

A package to centralized all validators function, used across the apps.

To getting started with this package, it's so easy, it consist in a couple of steps that you must to follow to use this package.

:zap: Install the package. :arrow_heading_up: Register your validators. :star: Use your validators.

• First at all, execute the following command:

yarn add @comparaonline/ui-validator

or

npm install @comparaonline/ui-validator

Notes

validateSyncWith introduced in the last version 0.0.19+, now we have validateSyncWith to execute validators in sync way and validateWith that will execute code in async way

• Then into your project, you must create a file called setup-validators.ts

// setup-validators.ts file
import * as Validator from "@comparaonline/ui-validator";

// then let's import all the validators needed for your app
import {
  required,
  ValidatorError as RequiredError
} from "@comparaonline/ui-validator/commons/required";
import {
  InRange,
  ValidatorError as InRangeError
} from "@comparaonline/ui-validator/commons/range";
import {
  oneOf,
  ValidatorError as oneOfError
} from "@comparaonline/ui-validator/commons/oneOf";

// then let's register our validators
Validator.register(required, "required");
Validator.register(InRange, "range");
Validator.oneOf(InRange, "oneOf");

// finally let's register our validators errors
Validator.registerError(
  RequiredError,
  "This is our message error for required fields"
);
Validator.registerError(
  InRangeError,
  "This is our message error for out of range fields"
);
Validator.registerError(
  oneOfError,
  "This is our message error for oneOf fields"
);

Once your have completed the setup, now you can use the validators, so go into your React compoment and use them as follow:

// SomeReactComponent.ts file
import React from 'react';
import TextField from '@material-ui/core/TextField';
import { validateWith } from '@comparaonline/ui-validator';

// simple usage
const Field = () => {
  return (
    <TextField
      fieldProps={{
        validate: validateWith('required', ['range', { max: 10, min: 5 }], ['oneOf', { options: ['Option1', 'Option2', 'Option3'] }]);
      }}
    />
  );
}

// advance usage
const Field = () => {
  return (
    <TextField
      fieldProps={{
        validate: validateWith(
          'required',
          ['range', { max: 10, min: 5 }],
          ['oneOf', { options: ['Option1', 'Option2', 'Option3'], error: 'this error will override the main error setup into setup validators file, {{value}} <= is the input value itself to be mapped inside here' }]
          );
      }}
    />
  );
}

This package keep simple validator function as

Required

####usage

import {
  Required,
  ValidatorError
} from "@comparaonline/ui-validator/commons/required";

This function will check that the value passed to be checked is not falsy values as null, undefined, false, '',

Email

####usage

import { isEmail } from "@comparaonline/ui-validator/commons/email";

This function will check that the value passed to be checked is a valid email

Truly

####usage

import { isTruly } from "@comparaonline/ui-validator/commons/truly";

This function will check that the value passed to be checked is consider as a true value by Boolean constructor

values consider as truly are: 'not empty string', 1, {}, Function, [], true.

Falsy

####usage

import { isFalsy } from "@comparaonline/ui-validator/commons/falsy";

This function will check that the value passed to be checked is consider as a false value by Boolean constructor

values consider as truly are: '', 0, null, undefined, NaN, false.

date

####usage :fire: validator with arguments

import { ageRange } from "@comparaonline/ui-validator/commons/date";

This function will check if the value passed in into range of ages.

This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

{
  minAge: 18,
  maxAge: 40,
  error: 'error message to override the default one',
  parser: (value: string, options: object, values?: object): Date => {},
  variables: { /* string key:value pair */ }
}

max

####usage :fire: validator with arguments

import { ageRange } from "@comparaonline/ui-validator/commons/date";

This function will check if the value passed is not grather than maxinum number.

This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

{
  max: 18,
  error: 'error message to override the default one',
  variables: { /* string key:value pair */ }
}

min

####usage :fire: validator with arguments

import { ageRange } from "@comparaonline/ui-validator/commons/date";

This function will check if the value passed is not lower than minimun number.

This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

{
  min: 18,
  error: 'error message to override the default one',
  variables: { /* string key:value pair */ }
}

match

####usage :fire: validator with arguments

import { ageRange } from "@comparaonline/ui-validator/commons/date";

This function will check if the value passed match with the regexp.

This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

{
  regexp: /([a-z]?)/,
  error: 'error message to override the default one',
  variables: { /* string key:value pair */ }
}

oneOf

####usage :fire: validator with arguments

import { ageRange } from "@comparaonline/ui-validator/commons/date";

This function will check if the value passed match with one of the options

This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

{
  options: ['option1', 'option2', ...],
  error: 'error message to override the default one',
  variables: { /* string key:value pair */ }
}

InRange

####usage :fire: validator with arguments

import { ageRange } from "@comparaonline/ui-validator/commons/date";

This function will check if the value is into range of numbers

This function can receive a kind of config before executing, it must be called as ['yourValidatorNameInSetupFile', options], where options are

{
  max: 100,
  min: 50,
  error: 'error message to override the default one',
  variables: { /* string key:value pair */ }
}

Considerations

Each variables object passed for validator with arguments, can be mapped to the error message, if you can display the variables into the error string, you must wrap the variable name into double curly braces, for example

{
  variables: {
    format: 'DD/MM/YYYY',
  },
  error: 'You must follow the format: {{format}}'
}

if the error is reached then it will output: You must follow the format: DD/MM/YYYY