@enterwell/react-form-validation v1.4.0

Features

• Keeps form's state and validation results
• Supports any kind of validation functions
• Dirty checking
• Separates data from view
• Relies on hooks, but can easily be used with class components

Installation

Package can be installed with one of the following commands (depending on whether you prefer npm, yarn or pnpm)

npm install @enterwell/react-form-validation

yarn add @enterwell/react-form-validation

pnpm add @enterwell/react-form-validation

Usage

Two quick steps to validate any kind of input.

Step 1:

• Define custom validation (or use some of predefined) and use it to initialize validation hook

import { isValidEmail, useValidation } from '@enterwell/react-form-validation';

const email = useValidation('matej.radovix@enterwell.net', isValidEmail);

Step 2:

• Pass the email data to your input

<div>
    <input
        className={email.error ? 'error' : 'no-error'}
        {...email.props} // This is shorthand for passing the `value`, `onChange` and `onBlur` properties
    />
    {email.error && (
        <span className="error-message">Incorrect email!</span>
    )}
</div>

And thats all!

API

useValidation(initialValue, validationFn, config?)

Hook that keeps on form field's data.

Params

Returns

Usage example

import { useValidation, isNonEmptyString } from '@enterwell/react-form-validation';

/* Some code... */

const userFormData = {
    name: useValidation(name, isNonEmptyString),
    age: useValidation(age, () => true)
};
console.log(userFormData.name) // {value: "Matej", error: false, onChange: ƒ, onBlur: ƒ, validate: ƒ, reset: f}"

extractValues(fields)

Util function for extracting values from fields' data objects.

Params

Returns

Usage example

import { ..., extractValues } from '@enterwell/react-form-validation';

/* useValidation example's code... */

const data = extractValues(userFormData);
//    ^ { name: "Matej", age: 10 }

setValues(fields, values)

Util function for setting field's values from provided data objects.

Params

Usage example

import { ..., setValues } from '@enterwell/react-form-validation';

const formData = {
    name: useValidation('', isNonEmptyString)
};

const item = useItem();
useEffect(() => {
    if (item) {
        setValues(formData, {
            name: item.name
        });
    }
}, [item]);

validateFields(fields)

Util function for validating values of all fields

Params

Returns

Usage example

import { ..., validateFields } from '@enterwell/react-form-validation';

/* useValidation example's code... */

const hasError = validateFields(userFormData);
console.log(hasError) // false

resetFields(fields)

Util function for resetting all fields' data.

Params

Usage example

import { ..., resetFields } from '@enterwell/react-form-validation';

/* useValidation example's code... */

resetFields(userFormData);

submitForm(fields, onSubmit)

Util function for handling the form submit. Form's fields are first validated. If all values are correct, they are extracted to data object and passed to onSubmit callback. Returns value of onSubmit callback.

Params

Returns

Usage example

import { ..., submitForm } from '@enterwell/react-form-validation';

/* useValidation example's code... */

const onSubmit = (data) => fetch("www.some-url.com/post", {
    method: 'POST',
    data: JSON.stringify(data)
});
submitForm(userFormData, onSubmit);

cancelForm(fields, onCancel)

Util function for handling the form cancel. Form's fields are reset and onCancel callback is called.

Params

Usage example

import { ..., cancelForm } from '@enterwell/react-form-validation';

/* useValidation example's code... */

const onCancel = (data) => alert("Form has been reset");
cancelForm(userFormData, onCancel);

Unless otherwise stated, each validation function will have the following #### Params and #### Returns.

Params

Returns

noError()

No error validation. Value of the field with this validation function will always be correct.

areEqual(value, other)

Are values equal validation. Value of the field with this validation function will be correct if it is equal to some other value (e.g. some other field's value).

Params

Returns

isTrue(value)

Is true validation. Value of the field with this validation function will be correct only if it is true.

isNotNull(value)

Is not null validation. Value of the field with this validation function will be correct only if it is not null.

isNonEmptyString(value)

Is non-empty string validation. Value of the field with this validation function will be correct if it is not an empty string.

isValidNumber(value)

Is valid number validation. Value of the field with this validation function will be correct if it represents the valid number (as number or as string).

isPositiveNumber(value)

Is positive number validation. Value of the field with this validation function will be correct if it is the positive number.

isNegativeNumber(value)

Is negative number validation. Value of the field with this validation function will be correct if it is the negative number.

isNonEmptyArray(value)

Is non-empty array validation. Value of the field with this validation function will be correct if it is the non-empty array.

isValidEmail(value)

Is valid email validation. Value od the field with this validation function will be correct if it is non-empty string with valid email address.

isValidIpAddress(value)

Is valid IP address validation. Value od the field with this validation function will be correct if it is a non-empty string with valid IPv4 or IPv6 address.

Future plans

We noticed that there are few things which could be added to our package in order to make it more flexible and easy to use. Here is what you can expect in the future:

• additional config which will enable to change when value is validate (e.g. only in onChange, in onBlur but only if current value is not valid and so on)
• more validation functions