validator-group v2.0.0

Validator Group

A simple library for collecting validation error messages from unrelated validators, inside or outside of your React components.

What this is

• A simple way to gather validation errors from across unrelated validators.
• Lightweight (comes with no sub-dependencies at all).
• Agnostic about how you do validation.
• Simple to implement.
• Usable across a mix of React and non-React code.
• Usable via a React hook.

What this is not

• A way of validating forms or fields (it simply allows the collection of validation messages from a group of unrelated validators).
• A way of creating forms.
• A way to mark individual fields or forms as invalid.

Use

Assume for each field you'd like to validate, you have a validation function. For example:

const myValidationFunction = () => {
    // Your validation code goes here.
    // This can be any code you like,
    // so long as it returns an array of
    // error messages (or an empty array
    // if there aren't any)

    // ...

    return myValidationErrorsArray;
};

Setting up validators

Add validators from inside your React functional components using the useValidatorGroup React hook:

import { useValidatorGroup } from "validator-group";

const MyFormFieldComponent = props => {
    // Use the hook to register your validator
    // The hook will auto-unregister this validator when this component is unmounted
    useValidatorGroup(
        () => myValidationFunction(),
        "myUniqueFieldName",
        [props.value] // This is important, as this is how the hook keeps track of the current value
    );

    return (
        <input value={props.value}/>
    );
}

...and/or Add validators from outside of React components:

import { setValidator, removeValidator } from "validator-group";

const myPageSetUpFunction = () => {
    // Register your validator
    setValidator(() => myValidationFunction(), "myUniqueFieldName");

    // You can remove the validator later if it no longer applies
    removeValidator("myUniqueFieldName");
};

Calling validators

Then when you want to validate all fields:

import { isValid } from "validator-group";

// `isValid()` checks all of the validation callbacks
// you've registered to see if there are any error messages
// It returns true if there aren't any, or false if there are
if (!isValid()) {
    console.log("You have invalid fields");

    return;
}

Getting validation messages

import { validate } from "validator-group";

// `validate()` checks all of the validation callbacks
// you've registered to see if there are any error messages,
// and returns them as a single array
const validationErrors = validate();

if (validationErrors.length > 0) {
    console.log(validationErrors); // e.g. ['Email address is invalid', 'Name is a required field', ...]

    return;
};

Validating multiple groups

In all of the above examples, you can also pass an arbitrary group name, in case you want to validate different fields at different times. By default, the group name is "default". Examples using groupName:

Registering validators against a group name:

// Inside one component
useValidatorGroup(() => myValidationFunction(), "field1", [props.value], "group_1");

// Inside another component
useValidatorGroup(() => myValidationFunction(), "field2", [props.value], "group_2");

// Somewhere else in your code
setValidator(() => myValidationFunction(), "field3", "group_1");

Validating specific groups:

// Run only the validators registered in group_1
const groupOneIsValid = isValid("group_1");

// Run only the validators registered in group_2
const groupTwoValidationErrors = validate("group_2");