React Hook Form Validation
Table of contents
Installation
npm i -S react-hook-form-validation
or
yarn add react-hook-form-validation
The hook currently supports the following validators
- Required value
- Min value of a number
- Max value of a number
- Min length of a string or an array
- Max length of a string or an array
- Email address
- URL
- RegEx pattern
- Custom function
Required
This validator can be useful if you want to be sure that your input value is defined, is not an empty string, array or object and is not a null.
Note that other validators do not perform their logic if empty value passed to them. So, make sure you use required
validator if needed.
import useValidation, {validateRequired} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateRequired(),
],
}]);
Min Number
If you need to ensure your input value not less than expected. It can compare numbers or strings like numbers.
import useValidation, {validateMin} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateMin(5),
],
}]);
Max Number
If you need to ensure your input value not more than expected. It can compare numbers or string like numbers.
import useValidation, {validateMax} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateMax(5),
],
}]);
Min Length
If you need to ensure your input contains not less characters or items than expected. It can compare length of a string or an array.
import useValidation, {validateMin} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateMin(5, 'length'),
],
}]);
Max Length
If you need to ensure your input contains not more characters or items than expected. It can compare length of a string or an array.
import useValidation, {validateMax} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateMax(5, 'length'),
],
}]);
import useValidation, {validateEmail} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateEmail(),
],
}]);
URL
import useValidation, {validateUrl} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validateUrl(),
],
}]);
Pattern
In case you need to validate your input based on any random RegEx pattern you interested in
import useValidation, {validatePattern} from 'react-hook-form-validation';
useValidation([{
field: 'field-name',
rules: [
validatePattern(/^[abc]+$/ui),
],
}]);
Func
Sync
In case you need to implement much more complex validation you can use func
validator.
It allows you to implement any validation logic you need. Even based on asynchronous logic.
A function has to return true
in case of you value is valid and vice versa.
import useValidation, {validateFunc} from 'react-hook-form-validation';
function isEven(input) {
const value = Number(input);
return !Number.isNaN(value) && value % 2 === 0;
}
useValidation([{
field: 'field-name',
rules: [
validateFunc(isEven),
],
}]);
Async
It can be useful if you need to compare your value with result of asynchronous query:
import useValidation, {validateFunc} from 'react-hook-form-validation';
function asyncFunction(value) {
return new Promise(() => setTimeout(() => false, 1000));
}
useValidation([{
field: 'field-name',
rules: [
validateFunc(asyncFunction),
],
}]);
Misc
Sometimes you may need to print something more specific rather than just "valid" or "invalid". For that purpose you may return an array from your function. Where the first element should be a sign of validity, and the rest will be proxied into the message builder function.
import useValidation, {validateFunc} from 'react-hook-form-validation';
function guessFruit(input) {
if (typeof input !== 'string') {
return false;
}
const FRUITS = ['apple', 'banana', 'kiwi'];
if (FRUITS.includes(input.toLowerCase())) {
return true;
}
return [false, ...FRUITS];
}
useValidation([{
field: 'field-name',
rules: [
validateFunc(asyncFunction, {
fail: ({payload}) => `Guessed wrong. It should have been ${payload.join(', ')}.`
})
],
}]);