@coxy/react-validator v2.0.7

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:

Api for React

ValidatorWrapper props

ValidatorField props

React api useValidator

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

Api for inline validation

Validator constructor parameters

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());