React Validator

Simple React form validation.

Data validation on the Node JS side, is also supported.

Need react >=16.3

Example

See more examples here

import React, { useState } from 'react';
import { ValidatorWrapper, rules, ValidatorField } from '@coxy/react-validator';

const validator = React.createRef();

const handleSubmit = () => {
  const { isValid, message, errors } = validator.current.validate();
  if (!isValid) {
    console.log(isValid, message, errors);
    return;
  }
  // Success
};

export default () => {
  const [email, handleChange] = useState('');

  return (
    <ValidatorWrapper ref={validator}>

      <ValidatorField value={email} rules={rules.email}>
        {({ isValid, message }) => (
          <>
            <input value={email} onChange={({ target: { value } }) => handleChange(value)} />
            {!isValid && <div>{message}</div>}
          </>
        )}
      </ValidatorField>

      <ValidatorField value={email} rules={rules.email}>
        <input value={email} onChange={({ target: { value } }) => handleChange(value)} />
      </ValidatorField>

      {/* This is also possible :) */}
      <ValidatorField value={email} rules={rules.email} />

      <button onClick={handleSubmit} type="button">
        Submit
      </button>

    </ValidatorWrapper>
  );
};

See more examples here  

Rules

You can create your own rules for validation, with your own error messages

const rules = {
  email: [{
    rule: value => value !== '' && value.length > 0,
    message: 'Value is required',
  }, {
    rule: value => value.indexOf('@') > -1,
    message: '@ is required',
  }]
}

This component has a default set of rules that you can use right away:

| name | Type | description | |--------------|----------|-------------------------------------------------------------------------| | email | | Check email for empty string and regexp | | password | | Check password for empty string and length | | notEmpty | | Check if the string is not empty | | boolean | | Will check that the value is present | | min | function | min(3) -> Check the number | | max | function | max(5) -> Check the number | | length | function | length(3, 5) -> Check string length (second parameter is optional) |

Api for React

ValidatorWrapper props

| name | default | required | description | |------------------|-------------|--------------|--------------------------------------------------------| | ref | null | no | React.ref or useRef | | stopAtFirstError | false | no | The validator will stop checking after the first error |

ValidatorField props

| name | default | required | description | |--------------|-----------------|------------------|-------------------------------| | value | undefined | yes | Value for validation | | rules | [] | yes | Array of rules for validation | | required | true | no | The field will be required | | id | null | no | ID for get field |

React api useValidator

const [isValid, { errors }] = useValidator('test value', rules.email)
console.log(isValid, errors) // false

Api for inline validation

Validator constructor parameters

| name | default | required | description | |------------------|-------------|--------------|--------------------------------------------------------| | stopAtFirstError | false | no | The validator will stop checking after the first error |

Validator.addField()

Adds a field for validation

import { Validator } from '@coxy/react-validator';

const validator = new Validator({ stopAtFirstError: true });
const field = validator.addField({
    rules: rules.password,
    value: '',
});

Validator.getField()

Returns the field by ID

import { Validator } from '@coxy/react-validator';

const validator = new Validator({ stopAtFirstError: true });
const field = validator.addField({
    rules: rules.password,
    value: '',
    id: 'test-field-name'
});
console.log(validator.getField('test-field-name')) // Field Class

Validator.removeField()

Removes a previously added field

import { Validator } from '@coxy/react-validator';

const validator = new Validator({ stopAtFirstError: true });
const field = validator.addField({
    rules: rules.password,
    value: '',
    id: 'test-field-name'
});

validator.removeField(field);
console.log(validator.getField('test-field-name')) // null

Validator.validate()

Validates all added fields

import { Validator } from '@coxy/react-validator';

const validator = new Validator({ stopAtFirstError: true });
const field = validator.addField({
    rules: rules.password,
    value: '',
});

console.log(validator.validate());