@chopperqt/react-hook-form-rules

This is a small library that contains rules for clearer validation handling in the react-hook-form library.

Rules

Default

getRequiredRule

Description

This rule makes the field required.

Options

| Option | Type | Default | Description | | ---------- | ------- | ------------------------- | --------------------------------------------------------------- | | isRequired | boolean | true | Dynamic parameter that indicates whether the field is required. | | message | string | "This field is required." | Custom message. |

Code example

import { getRequiredRule } from '@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    required: getRequiredRule()
  }}
})

getMaxRule

Description

This rule returns an error if the number is greater than the specified value.

Options

| Option | Type | Default | Description | | ------- | ------ | ------------------------- | --------------- | | max | number | - | Maximum number. | | message | string | "Maximum value is ${max}." | Custom message. |

Code example

import { getMaxRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    max: getMaxRule(15)
  }}
})

getMinRule

Description

This rule checks that the string contains a minimum number of characters.

Options

| Option | Type | Default | Description | | ------- | ------ | ------------------------- | --------------- | | min | number | - | Minimum number. | | message | string | "Minimum value is ${min}." | Custom message. |

Code example

import { getMinRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    min: getMinRule(15)
  }}
})

getMaxLengthRule

Description

This rule checks that the number of characters in the string does not exceed the specified value.

Options

| Option | Type | Default | Description | | --------- | ------ | -------------------------------- | ------------------------------------- | | maxLength | number | - | Maximum number of characters allowed. | | message | string | "Maximum length is ${maxLength}." | Custom message. |

Code example

import { getMaxLengthRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    maxLength: getMaxLengthRule(15)
  }}
})

getMinLengthRule

Description

The rule checks that the string contains at least the specified number of characters.

Options

| Option | Type | Default | Description | | --------- | ------ | -------------------------------- | ------------------------------------- | | minLength | number | - | Minimum number of characters allowed. | | message | string | "Minimum length is ${minLength}." | Custom message |

Code example

import { getMinLengthRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    minLength: getMinLengthRule(15)
  }}
})

Array

getRequiredArrayRule

Description

This rule makes the array field required.

Options

| Option | Type | Default | Description | | ------- | ------ | ------------------------- | ---------------- | | arr | array | - | Array of values. | | message | string | "This field is required." | Custom message. |

Code example

import { getRequiredArrayRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    validate: (arr) => getRequiredArrayRule(arr)
  }}
})

getMaxArrayLengthRule

Description

This rule returns an error if the number of values in the array exceeds the specified limit.

Options

| Option | Type | Default | Description | | --------- | ------ | ------------------------------------------ | ------------------------- | | arr | arrray | - | Array of values. | | maxLength | number | - | Maximum number of values. | | message | string | "Maximum number of values is ${maxLength}." | Custom message |

Code example

import { getMaxArrayLengthRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    validate: (arr) =>  getMaxArrayLengthRule(arr, 15)
  }}
})

getMinArrayLengthRule

Description

The rule checks that the array contains a minimum number of elements.

Options

| Option | Type | Default | Description | | --------- | ------ | ------------------------------------------ | ------------------------- | | arr | arrray | - | Array of values. | | minLength | number | - | Maximum number of values. | | message | string | "Minimum number of values is ${minLength}." | Custom message |

Code example

import { getMinArrayLengthRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    validate: (arr) =>  getMinArrayLengthRule(arr, 15)
  }}
})

Object

getRequiredObjectRule

Description

This rule makes the object field required.

Options

| Option | Type | Default | Description | | ------- | ------ | ------------------------- | ------------------- | | obj | object | - | Object with values. | | message | string | "This field is required." | Custom message. |

Code example

import { getRequiredObjectRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    validate: (arr) => getRequiredObjectRule(arr)
  }}
})

URL

getPatternRule

Description

The rule checks pattern by RegExp

Options

| Option | Type | Default | Description | | ------- | ------ | ------------------------------------------------------------ | ------------------- | | pattern | RegExp | - | Regular expression. | | message | string | "Invalid characters" | Custom message |

Code example

import { getEmailRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    pattern: getPatternRule(pattern)
  }}
})

getEmailRule

Description

The rule checks the entered email for correctness.

Options

| Option | Type | Default | Description | | ------------- | ------ | ------------------------------------------------------------ | ------------------- | | props | object | - | Object with values | | props.pattern | RegExp | ^[\w-.]+@([\w-]+.)+[\w-]{2,4}$ | Regular expression. | | props.message | string | "Please check the correctness of the entered email address." | Custom message |

Code example

import { getEmailRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    pattern: getEmailRule({})
  }}
})

getUrlRule

Description

The rule checks the entered URL for correctness.

Options

| Option | Type | Default | Description | | ------------- | ------ | ---------------------------------------------------------------------------------------------------------- | ------------------- | | props | object | - | Object with values | | props.pattern | RegExp | (http(s)?)://(www.)?[-a-zA-Z0-9@:%.+~#=]{1,256}.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%+.~#?&//=]*) | Regular expression. | | props.message | string | "The URL does not match the format." | Custom message |

Code example

import { getUrlRule } from '@chopperqt/@chopperqt/react-hook-form-rules';

const {...} = useController({
  rules: {{
    pattern: getUrlRule({})
  }}
})

Date

getRequiredDateRangeRule

Description

The rule validates the date range value

Options

| Option | Type | Default | Description | | ---------- | --------- | ------------------------- | ------------------- | | value | DateRange | - | Array with DateRange. | | isRequired | boolean | true | Dynamic parameter that indicates whether the field is required. | | message | string | "This field is required." | Custom message. |