@Coxy/react-validator

Simple React Form Validation

@Coxy/react-validator provides a simple and flexible way to validate forms in React.

Supports data validation both in-browser and on Node.js.

Requires React >=16.3.

Installation

npm install @coxy/react-validator
# or
yarn add @coxy/react-validator

Quick Start Example

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;
  }
  alert('Form is valid!');
};

export default function Example() {
  const [email, setEmail] = useState('');

  return (
    <ValidatorWrapper ref={validator}>
      <ValidatorField value={email} rules={rules.email}>
        {({ isValid, message }) => (
          <>
            <input value={email} onChange={({ target: { value } }) => setEmail(value)} />
            {!isValid && <div style={{ color: 'red' }}>{message}</div>}
          </>
        )}
      </ValidatorField>

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

More examples available here.

Built-in Validation Rules

Create your own rules easily, or use the built-in ones:

const rules = {
  notEmpty: [z.string().min(1, { error: 'Field is required' })],
  isTrue: [z.boolean({ error: 'Value is required' }).and(z.literal(true))],
  email: [z.string().min(1, { error: 'Email is required' }), z.email({ message: 'Email is invalid' })],
}

| Name | Type | Description | |----------|-------|--------------------------------------------| | email | Array | Validate non-empty email with regex check. | | notEmpty | Array | Check if a string is not empty. | | isTrue | Array | Ensure a boolean value is present. |

React API

<ValidatorWrapper /> Props

| Name | Default | Required | Description | |------------------|---------|----------|----------------------------------------------------| | ref | null | No | React ref or useRef for control. | | stopAtFirstError | false | No | Stop validating after the first error. |

<ValidatorField /> Props

| Name | Default | Required | Description | |----------|-----------|----------|---------------------------------------| | value | undefined | Yes | Value to validate. | | rules | [] | Yes | Validation rules array. | | required | true | No | Whether the field is required. | | id | null | No | ID for the field (for manual access). |

useValidator

Validate a value directly in your component:

import { useValidator, rules } from '@coxy/react-validator';

const [isValid, { errors }] = useValidator('[email protected]', rules.email);

console.log(isValid); // true or false
console.log(errors);  // array of error messages

Validator Class (Node.js / Manual Usage)

Use it server-side or in custom flows.

Validator Constructor Options

| Name | Default | Required | Description | |------------------|---------|----------|------------------------------------------------------| | stopAtFirstError | false | No | Stop validating after first error across all fields. |

Methods

.addField()

const validator = new Validator({ stopAtFirstError: true });

const field = validator.addField({
  rules: rules.email,
  value: '12345',
});

.getField(id)

const field = validator.getField('password-field');
console.log(field);

.removeField(field)

validator.removeField(field);

.validate()

const { isValid, message, errors } = validator.validate();
console.log(isValid, errors);

Full Server-Side Example

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

const validator = new Validator();

validator.addField({
  id: 'email',
  rules: rules.email,
  value: '[email protected]',
});

validator.addField({
  id: 'password',
  rules: rules.isTrue,
  value: true,
});

const result = validator.validate();

if (result.isValid) {
  console.log('Validation passed!');
} else {
  console.error('Validation failed:', result.errors);
}

License

MIT © Dsshard

Notes

• Lightweight, flexible, easy to integrate.
• Server-side and client-side validation supported.
• Create custom rules for different scenarios.
• Easy to add dynamic validation logic.

Fun Fact: Early validation of user inputs in a form can reduce backend server load by up to 40% compared to server-only validation!