@coxy/react-validator 2.0.4 → 2.0.6

package/.eslintrc.js

@@ -1,7 +1,5 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: [
-    '@coxy/eslint-config/react'
-  ]
+  extends: ['@coxy/eslint-config/react', 'plugin:prettier/recommended'],
 }

package/.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'always',
+  semi: false,
+  bracketSpacing: true,
+  tabWidth: 2,
+  printWidth: 120,
+  jsxSingleQuote: true,
+}

package/dist/context.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
+import { Validity } from './types';
 export declare const Context: import("react").Context<{
     registerField: (field: string | number) => void;
     unregisterField: (field: string | number) => void;
+    customErrors: Array<Validity>;
 }>;

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export { ValidatorField } from './validator-field';
 export { ValidatorWrapper } from './validator-wrapper';
 export { Validator } from './validator';
 export { useValidator } from './use-validator';
+export * from './types';

package/dist/index.js

@@ -1,4 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useValidator = exports.Validator = exports.ValidatorWrapper = exports.ValidatorField = exports.rules = void 0;
 var rules_1 = require("./rules");
@@ -11,3 +25,4 @@ var validator_1 = require("./validator");
 Object.defineProperty(exports, "Validator", { enumerable: true, get: function () { return validator_1.Validator; } });
 var use_validator_1 = require("./use-validator");
 Object.defineProperty(exports, "useValidator", { enumerable: true, get: function () { return use_validator_1.useValidator; } });
+__exportStar(require("./types"), exports);

package/dist/rules.d.ts

@@ -1,10 +1,5 @@
-import { Value } from './validator-field';
-declare type Fn = (value: Value) => string;
-export interface RuleInstance {
-    rule: (value: Value) => boolean;
-    message: string | Fn;
-}
-export declare type ValidatorRules = RuleInstance[];
+import { ValidatorRule } from './types';
+export declare type ValidatorRules = ValidatorRule[];
 export declare const rules: {
     notEmpty: {
         rule: (value: any) => boolean;
@@ -35,4 +30,3 @@ export declare const rules: {
         message: string;
     }[];
 };
-export {};

package/dist/rules.js

@@ -3,41 +3,58 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.rules = void 0;
 const emailReg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 exports.rules = {
-    notEmpty: [{
+    notEmpty: [
+        {
             rule: (value) => value !== '' && value.length > 0,
-            message: 'Value is required'
-        }],
-    bool: [{
+            message: 'Value is required',
+        },
+    ],
+    bool: [
+        {
             rule: (value) => !!value,
-            message: 'Value is required'
-        }],
-    password: [{
+            message: 'Value is required',
+        },
+    ],
+    password: [
+        {
             rule: (value) => value.length > 0,
-            message: 'Password field cannot be empty'
-        }, {
+            message: 'Password field cannot be empty',
+        },
+        {
             rule: (value) => value.length > 5,
-            message: 'Password field can not be less than 6 characters'
-        }],
-    email: [{
+            message: 'Password field can not be less than 6 characters',
+        },
+    ],
+    email: [
+        {
             rule: (value) => !!value && value !== '' && value.length !== 0,
-            message: 'Email is required'
-        }, {
+            message: 'Email is required',
+        },
+        {
             rule: (value) => emailReg.test(String(value).toLowerCase()),
-            message: 'Email is invalid'
-        }],
-    min: (min) => [{
+            message: 'Email is invalid',
+        },
+    ],
+    min: (min) => [
+        {
             rule: (value) => parseFloat(value) > min,
-            message: `The value must be greater than ${min}`
-        }],
-    max: (max) => [{
+            message: `The value must be greater than ${min}`,
+        },
+    ],
+    max: (max) => [
+        {
             rule: (value) => parseFloat(value) < max,
-            message: `The value must be smaller ${max}`
-        }],
-    length: (min, max) => [{
+            message: `The value must be smaller ${max}`,
+        },
+    ],
+    length: (min, max) => [
+        {
             rule: (value) => String(value).length >= min,
-            message: `No less than ${min} symbols`
-        }, {
+            message: `No less than ${min} symbols`,
+        },
+        {
             rule: (value) => (max !== undefined ? String(value).length <= max : true),
-            message: `No more than ${max} symbols`
-        }]
+            message: `No more than ${max} symbols`,
+        },
+    ],
 };

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+import { ValidatorRules } from './rules';
+import { Value } from './validator-field';
+declare type Fn = (value: Value) => string;
+export interface ValidatorRule {
+    rule: (value: Value) => boolean;
+    message: string | Fn;
+}
+export interface ErrorMessage {
+    message: string;
+    isValid: boolean;
+}
+export interface Validity {
+    message: string;
+    isValid: boolean;
+    errors?: ErrorMessage[];
+    id?: string | number;
+}
+export interface FieldParams {
+    value: Value;
+    rules: ValidatorRules;
+    required?: boolean;
+    id?: string | number;
+}
+export {};

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/use-validator.d.ts

@@ -1,3 +1,4 @@
 import { ValidatorRules } from './rules';
-import { Validity, Value } from './validator-field';
+import { Value } from './validator-field';
+import { Validity } from './types';
 export declare function useValidator(value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>];

package/dist/validator-field.d.ts

@@ -1,16 +1,7 @@
 import { ReactNode } from 'react';
+import { Validity } from 'types';
 import { ValidatorRules } from './rules';
 export declare type Value = any;
-export interface ErrorMessage {
-    message: string;
-    isValid: boolean;
-}
-export interface Validity {
-    message: string;
-    isValid: boolean;
-    errors?: ErrorMessage[];
-    id?: string | number;
-}
 declare type Fn = (validity: Validity, value: Value) => ReactNode;
 interface Props {
     rules?: ValidatorRules;
@@ -20,6 +11,7 @@ interface Props {
     children?: ReactNode | Fn;
     unregisterField: (val: any) => void;
     registerField: (val: any) => void;
+    customErrors: Array<Validity>;
 }
-export declare function ValidatorField(props: Omit<Props, 'registerField' | 'unregisterField'>): JSX.Element;
+export declare function ValidatorField(props: Omit<Props, 'registerField' | 'unregisterField' | 'customErrors'>): JSX.Element;
 export {};

package/dist/validator-field.js

@@ -13,21 +13,26 @@ class ValidationFieldWrapper extends react_1.Component {
         this.props.registerField(this);
     }
     validate() {
+        const props = this.props;
+        const customError = (props.customErrors || []).find((item) => item.id === props.id);
+        if (customError) {
+            return customError;
+        }
         const field = new validator_1.Field({
-            rules: this.props.rules,
-            required: this.props.required,
-            value: this.props.value,
-            id: this.props.id
+            rules: props.rules,
+            required: props.required,
+            value: props.value,
+            id: props.id,
         });
         return field.validate();
     }
     render() {
         const { children, value } = this.props;
         const validity = this.validate();
-        return (typeof children === 'function' ? children(validity, value) : children);
+        return typeof children === 'function' ? children(validity, value) : children;
     }
 }
 function ValidatorField(props) {
-    return ((0, jsx_runtime_1.jsx)(context_1.Context.Consumer, { children: (data) => ((0, jsx_runtime_1.jsx)(ValidationFieldWrapper, Object.assign({}, props, { registerField: data.registerField, unregisterField: data.unregisterField }))) }));
+    return ((0, jsx_runtime_1.jsx)(context_1.Context.Consumer, { children: (data) => ((0, jsx_runtime_1.jsx)(ValidationFieldWrapper, Object.assign({}, props, { customErrors: data.customErrors, registerField: data.registerField, unregisterField: data.unregisterField }))) }));
 }
 exports.ValidatorField = ValidatorField;

package/dist/validator-wrapper.d.ts

@@ -1,4 +1,6 @@
 import { Component, ReactNode, RefObject } from 'react';
+import { Validity } from './types';
+import { Field } from './validator';
 interface ComponentProps {
     children?: ReactNode;
     stopAtFirstError?: boolean;
@@ -6,12 +8,17 @@ interface ComponentProps {
 }
 export declare class ValidatorWrapper extends Component<ComponentProps> {
     fields: any[];
+    state: {
+        customErrors: any[];
+    };
     constructor(props: any, ctx: any);
     componentWillUnmount(): void;
     registerField(field: any): void;
     unregisterField(field: any): void;
-    getField(id: any): any;
-    validate(): import("./validator-field").Validity;
+    getField(id: any): Field | null;
+    setCustomError(customError: Validity): void;
+    clearCustomErrors(): void;
+    validate(): Validity;
     render(): JSX.Element;
 }
 export {};

package/dist/validator-wrapper.js

@@ -9,6 +9,9 @@ class ValidatorWrapper extends react_1.Component {
     constructor(props, ctx) {
         super(props, ctx);
         this.fields = [];
+        this.state = {
+            customErrors: [],
+        };
         this.registerField = this.registerField.bind(this);
         this.unregisterField = this.unregisterField.bind(this);
     }
@@ -28,6 +31,14 @@ class ValidatorWrapper extends react_1.Component {
     getField(id) {
         return this.fields.find((field) => field.props.id === id) || null;
     }
+    setCustomError(customError) {
+        this.setState({
+            customErrors: [...this.state.customErrors, customError],
+        });
+    }
+    clearCustomErrors() {
+        this.setState({ customErrors: [] });
+    }
     validate() {
         const validator = new validator_1.Validator({ stopAtFirstError: this.props.stopAtFirstError });
         this.fields.forEach((comp) => {
@@ -36,7 +47,11 @@ class ValidatorWrapper extends react_1.Component {
         return validator.validate();
     }
     render() {
-        return ((0, jsx_runtime_1.jsx)(context_1.Context.Provider, Object.assign({ value: { registerField: this.registerField, unregisterField: this.unregisterField } }, { children: this.props.children })));
+        return ((0, jsx_runtime_1.jsx)(context_1.Context.Provider, Object.assign({ value: {
+                customErrors: this.state.customErrors,
+                registerField: this.registerField,
+                unregisterField: this.unregisterField,
+            } }, { children: this.props.children })));
     }
 }
 exports.ValidatorWrapper = ValidatorWrapper;

package/dist/validator.d.ts

@@ -1,11 +1,4 @@
-import { Validity, Value } from './validator-field';
-import { ValidatorRules } from './rules';
-export interface FieldParams {
-    value: Value;
-    rules: ValidatorRules;
-    required?: boolean;
-    id?: string | number;
-}
+import { FieldParams, Validity } from './types';
 export declare class Field {
     private rules;
     private required;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coxy/react-validator",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "🚀 Simple validation form for React or NodeJS apps. useValidator are included ;)",
   "main": "./dist/index.js",
   "repository": {
@@ -45,14 +45,17 @@
     "coveralls": "3.1.1",
     "eslint": "8.25.0",
     "eslint-config-standard": "17.0.0",
+    "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-n": "15.3.0",
     "eslint-plugin-promise": "6.0.1",
     "eslint-plugin-filename-rules": "1.2.0",
     "eslint-plugin-react": "7.31.8",
+    "eslint-plugin-prettier": "4.2.1",
     "jest": "29.1.2",
     "jest-environment-jsdom": "29.1.2",
+    "prettier": "2.8.7",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "29.0.3",

package/src/context.ts

@@ -1,6 +1,9 @@
 import { createContext } from 'react'
 
+import { Validity } from './types'
+
 export const Context = createContext<{
-  registerField:(field: string | number) => void,
-  unregisterField:(field: string | number) => void
-    }>(null)
+  registerField: (field: string | number) => void
+  unregisterField: (field: string | number) => void
+  customErrors: Array<Validity>
+}>(null)

package/src/index.ts

@@ -3,3 +3,4 @@ export { ValidatorField } from './validator-field'
 export { ValidatorWrapper } from './validator-wrapper'
 export { Validator } from './validator'
 export { useValidator } from './use-validator'
+export * from './types'

package/src/rules.ts

@@ -1,59 +1,70 @@
-import { Value } from './validator-field'
+import { ValidatorRule } from './types'
 
 // eslint-disable-next-line
-const emailReg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+const emailReg =
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-type Fn = (value: Value) => string
+export type ValidatorRules = ValidatorRule[]
 
-export interface RuleInstance {
-  rule: (value: Value) => boolean
-  message: string | Fn
-}
+export const rules = {
+  notEmpty: [
+    {
+      rule: (value) => value !== '' && value.length > 0,
+      message: 'Value is required',
+    },
+  ],
 
-export type ValidatorRules = RuleInstance[]
+  bool: [
+    {
+      rule: (value) => !!value,
+      message: 'Value is required',
+    },
+  ],
 
-export const rules = {
-  notEmpty: [{
-    rule: (value) => value !== '' && value.length > 0,
-    message: 'Value is required'
-  }],
-
-  bool: [{
-    rule: (value) => !!value,
-    message: 'Value is required'
-  }],
-
-  password: [{
-    rule: (value) => value.length > 0,
-    message: 'Password field cannot be empty'
-  }, {
-    rule: (value) => value.length > 5,
-    message: 'Password field can not be less than 6 characters'
-  }],
-
-  email: [{
-    rule: (value) => !!value && value !== '' && value.length !== 0,
-    message: 'Email is required'
-  }, {
-    rule: (value) => emailReg.test(String(value).toLowerCase()),
-    message: 'Email is invalid'
-  }],
-
-  min: (min) => [{
-    rule: (value) => parseFloat(value) > min,
-    message: `The value must be greater than ${min}`
-  }],
-
-  max: (max) => [{
-    rule: (value) => parseFloat(value) < max,
-    message: `The value must be smaller ${max}`
-  }],
-
-  length: (min, max?) => [{
-    rule: (value) => String(value).length >= min,
-    message: `No less than ${min} symbols`
-  }, {
-    rule: (value) => (max !== undefined ? String(value).length <= max : true),
-    message: `No more than ${max} symbols`
-  }]
+  password: [
+    {
+      rule: (value) => value.length > 0,
+      message: 'Password field cannot be empty',
+    },
+    {
+      rule: (value) => value.length > 5,
+      message: 'Password field can not be less than 6 characters',
+    },
+  ],
+
+  email: [
+    {
+      rule: (value) => !!value && value !== '' && value.length !== 0,
+      message: 'Email is required',
+    },
+    {
+      rule: (value) => emailReg.test(String(value).toLowerCase()),
+      message: 'Email is invalid',
+    },
+  ],
+
+  min: (min) => [
+    {
+      rule: (value) => parseFloat(value) > min,
+      message: `The value must be greater than ${min}`,
+    },
+  ],
+
+  max: (max) => [
+    {
+      rule: (value) => parseFloat(value) < max,
+      message: `The value must be smaller ${max}`,
+    },
+  ],
+
+  length: (min, max?) => [
+    {
+      rule: (value) => String(value).length >= min,
+      message: `No less than ${min} symbols`,
+    },
+    {
+      rule: (value) => (max !== undefined ? String(value).length <= max : true),
+      message: `No more than ${max} symbols`,
+    },
+  ],
 }

package/src/types.ts

@@ -0,0 +1,27 @@
+import { ValidatorRules } from './rules'
+import { Value } from './validator-field'
+type Fn = (value: Value) => string
+
+export interface ValidatorRule {
+  rule: (value: Value) => boolean
+  message: string | Fn
+}
+
+export interface ErrorMessage {
+  message: string
+  isValid: boolean
+}
+
+export interface Validity {
+  message: string
+  isValid: boolean
+  errors?: ErrorMessage[]
+  id?: string | number
+}
+
+export interface FieldParams {
+  value: Value
+  rules: ValidatorRules
+  required?: boolean
+  id?: string | number
+}

package/src/use-validator.test.tsx

@@ -25,7 +25,7 @@ afterEach(() => {
 jest.useFakeTimers()
 
 it('check state change and hide field', () => {
-  function Comp () {
+  function Comp() {
     const [value, setValue] = useState(false)
     const [isValid, validateObject] = useValidator(value, rules.bool)
 
@@ -39,8 +39,8 @@ it('check state change and hide field', () => {
 
     return (
       <>
-        <span data-testid="test1">{isValid ? 'true' : 'false'}</span>
-        <span data-testid="test2">{validateObject.message || 'true'}</span>
+        <span data-testid='test1'>{isValid ? 'true' : 'false'}</span>
+        <span data-testid='test2'>{validateObject.message || 'true'}</span>
       </>
     )
   }

package/src/use-validator.ts

@@ -1,11 +1,11 @@
 import { Validator } from './validator'
 import { ValidatorRules } from './rules'
-import { Validity, Value } from './validator-field'
+import { Value } from './validator-field'
+import { Validity } from './types'
 
-export function useValidator (value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>] {
+export function useValidator(value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>] {
   const validator = new Validator()
   validator.addField({ value, rules })
   const { isValid, ...validateObject } = validator.validate()
   return [isValid, validateObject]
 }
-

package/src/validator-field.test.tsx

@@ -14,20 +14,20 @@ it('render without wrapper', () => {
 })
 
 it('normal render', () => {
-  render((
+  render(
     <ValidatorWrapper>
-      <ValidatorField rules={[]} value="" />
-    </ValidatorWrapper>
-  ))
+      <ValidatorField rules={[]} value='' />
+    </ValidatorWrapper>,
+  )
 })
 
 it('check context validator', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
       <ValidatorField rules={[]} />
-    </ValidatorWrapper>
-  ))
+    </ValidatorWrapper>,
+  )
 
   const validateResult = validator.current.validate()
 
@@ -39,16 +39,16 @@ it('check failed validation', () => {
   const validator1 = createRef<ValidatorWrapper>()
   const validator2 = createRef<ValidatorWrapper>()
 
-  render((
+  render(
     <>
       <ValidatorWrapper ref={validator1}>
-        <ValidatorField rules={rules.email} value="test" />
+        <ValidatorField rules={rules.email} value='test' />
       </ValidatorWrapper>
       <ValidatorWrapper ref={validator2}>
-        <ValidatorField rules={rules.email} value="" />
+        <ValidatorField rules={rules.email} value='' />
       </ValidatorWrapper>
-    </>
-  ))
+    </>,
+  )
 
   act(() => {
     const validateResult1 = validator1.current.validate()
@@ -70,7 +70,7 @@ jest.useFakeTimers()
 it('check state change and hide field', () => {
   const validator1 = createRef<ValidatorWrapper>()
 
-  function Comp () {
+  function Comp() {
     const [st, setSt] = useState(true)
 
     useEffect(() => {
@@ -83,10 +83,8 @@ it('check state change and hide field', () => {
 
     return (
       <ValidatorWrapper ref={validator1}>
-        <ValidatorField rules={rules.email} value="test" />
-        {st && (
-          <ValidatorField rules={rules.email} value="" />
-        )}
+        <ValidatorField rules={rules.email} value='test' />
+        {st && <ValidatorField rules={rules.email} value='' />}
       </ValidatorWrapper>
     )
   }
@@ -104,11 +102,11 @@ it('check state change and hide field', () => {
 
 it('check success validation', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rules.email} value="email@email.com" />
-    </ValidatorWrapper>
-  ))
+      <ValidatorField rules={rules.email} value='email@email.com' />
+    </ValidatorWrapper>,
+  )
 
   const validateResult = validator.current.validate()
 
@@ -118,17 +116,13 @@ it('check success validation', () => {
 
 it('check success validation fot child function', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rules.email} value="email@email.com">
-        {({ isValid, message }) => (
-          <>
-            {!isValid && <div>{message}</div>}
-          </>
-        )}
+      <ValidatorField rules={rules.email} value='email@email.com'>
+        {({ isValid, message }) => <>{!isValid && <div>{message}</div>}</>}
       </ValidatorField>
-    </ValidatorWrapper>
-  ))
+    </ValidatorWrapper>,
+  )
 
   const validateResult = validator.current.validate()
 
@@ -138,21 +132,19 @@ it('check success validation fot child function', () => {
 
 it('check custom rule message function', () => {
   const validator = createRef<ValidatorWrapper>()
-  const rule = [{
-    rule: (value) => value !== 'test',
-    message: (value) => `test message ${value}`
-  }]
-  render((
+  const rule = [
+    {
+      rule: (value) => value !== 'test',
+      message: (value) => `test message ${value}`,
+    },
+  ]
+  render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={rule} value="test">
-        {({ isValid, message }) => (
-          <>
-            {!isValid && <div>{message}</div>}
-          </>
-        )}
+      <ValidatorField rules={rule} value='test'>
+        {({ isValid, message }) => <>{!isValid && <div>{message}</div>}</>}
       </ValidatorField>
-    </ValidatorWrapper>
-  ))
+    </ValidatorWrapper>,
+  )
 
   const validateResult = validator.current.validate()
 

package/src/validator-field.tsx

@@ -1,4 +1,5 @@
 import { Component, ReactNode } from 'react'
+import { Validity } from 'types'
 
 import { Context } from './context'
 import { Field } from './validator'
@@ -6,62 +7,58 @@ import { ValidatorRules } from './rules'
 
 export type Value = any
 
-export interface ErrorMessage {
-  message: string
-  isValid: boolean
-}
-
-export interface Validity {
-  message: string
-  isValid: boolean
-  errors?: ErrorMessage[]
-  id?: string | number
-}
-
 type Fn = (validity: Validity, value: Value) => ReactNode
 
 interface Props {
-  rules?: ValidatorRules,
-  required?: boolean,
+  rules?: ValidatorRules
+  required?: boolean
   value?: Value
   id?: string | number
   children?: ReactNode | Fn
   unregisterField: (val: any) => void
   registerField: (val: any) => void
+  customErrors: Array<Validity>
 }
 
 class ValidationFieldWrapper extends Component<Props> {
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.props.unregisterField(this)
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.props.registerField(this)
   }
 
-  validate (): Validity {
+  validate(): Validity {
+    const props = this.props
+    const customError = (props.customErrors || []).find((item) => item.id === props.id)
+    if (customError) {
+      return customError
+    }
+
     const field = new Field({
-      rules: this.props.rules,
-      required: this.props.required,
-      value: this.props.value,
-      id: this.props.id
+      rules: props.rules,
+      required: props.required,
+      value: props.value,
+      id: props.id,
     })
     return field.validate()
   }
 
-  render () {
+  render() {
     const { children, value } = this.props
     const validity = this.validate()
-    return (typeof children === 'function' ? children(validity, value) : children)
+    return typeof children === 'function' ? children(validity, value) : children
   }
 }
 
-export function ValidatorField (props: Omit<Props, 'registerField' | 'unregisterField'>) {
+export function ValidatorField(props: Omit<Props, 'registerField' | 'unregisterField' | 'customErrors'>) {
   return (
     <Context.Consumer>
       {(data) => (
         <ValidationFieldWrapper
           {...props}
+          customErrors={data.customErrors}
           registerField={data.registerField}
           unregisterField={data.unregisterField}
         />

package/src/validator-wrapper.test.tsx

@@ -15,7 +15,7 @@ it('render without child', () => {
 
 it('check wrapper validator', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
       <ValidatorField rules={[]} />
       <ValidatorField rules={[]} />
@@ -23,8 +23,8 @@ it('check wrapper validator', () => {
       <ValidatorField rules={[]} />
       <ValidatorField rules={[]} />
       <ValidatorField rules={[]} />
-    </ValidatorWrapper>
-  ))
+    </ValidatorWrapper>,
+  )
 
   expect(typeof validator.current).toBe('object')
   expect(typeof validator.current.validate).toBe('function')
@@ -32,12 +32,12 @@ it('check wrapper validator', () => {
 
 it('check getField validator', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id="test" />
-      <ValidatorField rules={[]} id="test-fields" />
-    </ValidatorWrapper>
-  ))
+      <ValidatorField rules={[]} id='test' />
+      <ValidatorField rules={[]} id='test-fields' />
+    </ValidatorWrapper>,
+  )
   expect(typeof validator.current.getField).toBe('function')
   const field = validator.current.getField('test')
 
@@ -50,11 +50,11 @@ it('check getField validator', () => {
 
 it('check getField undefined field', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id="test-empty-field" />
-    </ValidatorWrapper>
-  ))
+      <ValidatorField rules={[]} id='test-empty-field' />
+    </ValidatorWrapper>,
+  )
 
   const field = validator.current.getField('8')
   expect(field).toBe(null)
@@ -62,13 +62,13 @@ it('check getField undefined field', () => {
 
 it('check stopAtFirstError validator', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator} stopAtFirstError>
-      <ValidatorField rules={[]} value="test" />
-      <ValidatorField rules={rules.email} value="test" />
-      <ValidatorField rules={rules.password} value="" />
-    </ValidatorWrapper>
-  ))
+      <ValidatorField rules={[]} value='test' />
+      <ValidatorField rules={rules.email} value='test' />
+      <ValidatorField rules={rules.password} value='' />
+    </ValidatorWrapper>,
+  )
   const fieldValidate = validator.current.validate()
   expect(fieldValidate.isValid).toBe(false)
   expect(fieldValidate.message).toBe('Email is invalid')
@@ -77,11 +77,11 @@ it('check stopAtFirstError validator', () => {
 
 it('check unregisterField, registerField', () => {
   const validator = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validator}>
-      <ValidatorField rules={[]} id="test-register-field" />
-    </ValidatorWrapper>
-  ))
+      <ValidatorField rules={[]} id='test-register-field' />
+    </ValidatorWrapper>,
+  )
 
   expect(typeof validator.current.registerField).toBe('function')
   expect(typeof validator.current.unregisterField).toBe('function')
@@ -92,10 +92,10 @@ it('check filed in field', () => {
   render(
     <ValidatorWrapper ref={validator}>
       <ValidatorField rules={[]}>
-        <ValidatorField rules={[]} id="check-validate-field-1" />
-        <ValidatorField rules={[]} id="check-validate-field-2" />
+        <ValidatorField rules={[]} id='check-validate-field-1' />
+        <ValidatorField rules={[]} id='check-validate-field-2' />
       </ValidatorField>
-    </ValidatorWrapper>
+    </ValidatorWrapper>,
   )
 
   expect(typeof validator.current).toBe('object')
@@ -107,14 +107,14 @@ it('check filed in field', () => {
 it('check wrapper in wrapper', () => {
   const validatorOut = createRef<ValidatorWrapper>()
   const validatorIn = createRef<ValidatorWrapper>()
-  render((
+  render(
     <ValidatorWrapper ref={validatorOut}>
-      <ValidatorField rules={rules.email} value="" />
+      <ValidatorField rules={rules.email} value='' />
       <ValidatorWrapper ref={validatorIn}>
-        <ValidatorField rules={rules.password} value="successpasswword" />
+        <ValidatorField rules={rules.password} value='successpasswword' />
       </ValidatorWrapper>
-    </ValidatorWrapper>
-  ))
+    </ValidatorWrapper>,
+  )
   expect(validatorIn.current.validate().isValid).toBe(true)
   expect(validatorOut.current.validate().isValid).toBe(false)
 })
@@ -122,16 +122,16 @@ it('check wrapper in wrapper', () => {
 it('check two validators', () => {
   const validatorSuccess = createRef<ValidatorWrapper>()
   const validatorFailed = createRef<ValidatorWrapper>()
-  render((
+  render(
     <>
       <ValidatorWrapper ref={validatorSuccess}>
-        <ValidatorField rules={rules.password} value="successpasswword" />
+        <ValidatorField rules={rules.password} value='successpasswword' />
       </ValidatorWrapper>
       <ValidatorWrapper ref={validatorFailed}>
-        <ValidatorField rules={rules.email} value="" />
+        <ValidatorField rules={rules.email} value='' />
       </ValidatorWrapper>
-    </>
-  ))
+    </>,
+  )
 
   expect(validatorFailed.current.validate().isValid).toBe(false)
   expect(validatorSuccess.current.validate().isValid).toBe(true)

package/src/validator-wrapper.tsx

@@ -1,7 +1,8 @@
 import { Component, ReactNode, RefObject } from 'react'
 
+import { Validity } from './types'
 import { Context } from './context'
-import { Validator } from './validator'
+import { Field, Validator } from './validator'
 
 interface ComponentProps {
   children?: ReactNode
@@ -11,33 +12,46 @@ interface ComponentProps {
 
 export class ValidatorWrapper extends Component<ComponentProps> {
   fields = []
+  state = {
+    customErrors: [],
+  }
 
-  constructor (props, ctx) {
+  constructor(props, ctx) {
     super(props, ctx)
     this.registerField = this.registerField.bind(this)
     this.unregisterField = this.unregisterField.bind(this)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.fields = []
   }
 
-  registerField (field) {
+  registerField(field) {
     if (field && !this.fields.includes(field)) {
       this.fields.push(field)
     }
   }
 
-  unregisterField (field) {
+  unregisterField(field) {
     const index = this.fields.indexOf(field)
     if (index > -1) this.fields.splice(index, 1)
   }
 
-  getField (id) {
+  getField(id): Field | null {
     return this.fields.find((field) => field.props.id === id) || null
   }
 
-  validate () {
+  setCustomError(customError: Validity) {
+    this.setState({
+      customErrors: [...this.state.customErrors, customError],
+    })
+  }
+
+  clearCustomErrors() {
+    this.setState({ customErrors: [] })
+  }
+
+  validate(): Validity {
     const validator = new Validator({ stopAtFirstError: this.props.stopAtFirstError })
     this.fields.forEach((comp) => {
       validator.addField(comp.props)
@@ -45,10 +59,14 @@ export class ValidatorWrapper extends Component<ComponentProps> {
     return validator.validate()
   }
 
-  render () {
+  render() {
     return (
       <Context.Provider
-        value={{ registerField: this.registerField, unregisterField: this.unregisterField }}
+        value={{
+          customErrors: this.state.customErrors,
+          registerField: this.registerField,
+          unregisterField: this.unregisterField,
+        }}
       >
         {this.props.children}
       </Context.Provider>

package/src/validator.test.tsx

@@ -12,7 +12,7 @@ it('check normal add and remove fields', () => {
   const fieldPassword = validator.addField({
     rules: rules.password,
     value: '',
-    id: 'for-remove'
+    id: 'for-remove',
   })
 
   expect(typeof fieldPassword).toBe('object')

package/src/validator.ts

@@ -1,40 +1,24 @@
-import { Validity, Value } from './validator-field'
+import { Value } from './validator-field'
 import { ValidatorRules } from './rules'
-
-export interface FieldParams {
-  value: Value
-  rules: ValidatorRules,
-  required?: boolean
-  id?: string|number
-}
+import { FieldParams, Validity } from './types'
 
 export class Field {
   private rules: ValidatorRules
   private required: boolean
   private value: Value
-  public id: string|number
+  public id: string | number
 
-  constructor ({
-    rules,
-    required,
-    value,
-    id
-  }: FieldParams) {
+  constructor({ rules, required, value, id }: FieldParams) {
     this.rules = rules
     this.required = required
     this.value = value
     this.id = id
   }
 
-  validate (): Validity {
+  validate(): Validity {
     let isValid = true
     let message = ''
-    const {
-      rules,
-      value,
-      required,
-      id
-    } = this
+    const { rules, value, required, id } = this
 
     const isEmptyValue = !value && parseFloat(value) !== 0
 
@@ -65,27 +49,27 @@ export class Validator {
   private fields: Field[]
   private params: ValidatorParams
 
-  constructor (params?: ValidatorParams) {
+  constructor(params?: ValidatorParams) {
     this.params = params || null
     this.fields = []
   }
 
-  addField (params: FieldParams): Field {
+  addField(params: FieldParams): Field {
     const field = new Field(params)
     this.fields.push(field)
     return field
   }
 
-  removeField (field: Field): void {
+  removeField(field: Field): void {
     const index = this.fields.indexOf(field)
     if (index > -1) this.fields.splice(index, 1)
   }
 
-  getField (id: Field['id']): Field {
+  getField(id: Field['id']): Field {
     return this.fields.find((field) => field.id === id) || null
   }
 
-  validate (): Validity {
+  validate(): Validity {
     let prevResult
     const statuses = this.fields.map((field) => {
       if (this.params?.stopAtFirstError && prevResult && prevResult.isValid === false) {