react-svl

react-svl is simple validation library for React.

Install

To use react-svl, all you need to do is install the react-svl package.

npm install react-svl

or

yarn add react-svl

Usage

This is an example of using Chakra UI.

import { useForm } from 'react-svl';

export const ValdiationExample = () => {
  // setting initialValues and validationRules
  const { errors, values, setFieldValue, validateField } = useForm({
    initialValues: {
      FirstName: '',
      Password: '',
    },
    validationRules: {
      FirstName: {
        isRequired: true,
      },
      Password: {
        minLength: 8,
      },
    },
  });
  return (
    <Box>
      <FormControl isInvalid={errors.FirstName.isInValid}>
        <FormLabel>First Name</FormLabel>
        <Input
          value={values.FirstName}
          onChange={(e) => setFieldValue('FirstName', e.currentTarget.value)}
          onBlur={() => validateField('FirstName')}
        />
        <FormErrorMessage>{errors.FirstName.isRequired?.message}</FormErrorMessage>
      </FormControl>
      <FormControl isInvalid={errors.Password.isInValid}>
        <FormLabel>Password</FormLabel>
        <Input
          value={values.Password}
          onChange={(e) => setFieldValue('Password', e.currentTarget.value)}
          onBlur={() => validateField('Password')}
        />
        <FormErrorMessage>{errors.Password.minLength?.message}</FormErrorMessage>
      </FormControl>
    </Box>
  );
};

API

useForm

useForm is custom hook for validation.

const { errors, values, setFieldValue, validateField } = useForm({
  initialValues: {
    FirstName: '',
    Password: '',
  },
  validationRules: {
    FirstName: {
      isRequired: true,
    },
    Password: {
      minLength: 8,
    },
  },
});

Validation Rule

The following items can be set as validation rules.

property	type	description
isRequired	boolean	Required or not
max	number	Maximum value
min	number	Minimum value
maxLength	number	Maximum text length
minLength	number	Minimum text length
validate	(value: T[keyof T]) => boolean	Custom rule(true: Error、false: no error)

Change State

You can use setFieldValue to change the State.

<Input value={values.FirstName} onChange={(e) => setFieldValue('FirstName', e.currentTarget.value)} />

Execute Validate

Using validateField will execute the validation.

<Input
  value={values.FirstName}
  onChange={(e) => setFieldValue('FirstName', e.currentTarget.value)}
  onBlur={() => validateField('FirstName')}
/>

Default Error Message

It also sets the default message for each validation rule, as shown below. (None in the case of custom rule)
You can use errors.property_name.rules.name.message.

Rule	Error Message
isRequired	{property name} is required.
max	{property name} must be less than or equal to {Maximum value}.
min	{property name} must be greater than or equal to {Minimum value}.
maxLength	{property name} must be less than or equal to {Maximum text length} characters.
minLength	{property name} must be {Minimum text length} characters or more.