react-form-input-validation - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0

dist/src/hooks/useFormInputValidation.d.ts

+import React from "react";
+import { Lang } from "../specs/react-form-input-validator.spec";
+import * as Validator from "validatorjs";
+export interface FieldsObject {
+    [key: string]: string | number | boolean | Array<any> | object | any;
+}
+export interface ErrorsObject {
+    [key: string]: string;
+}
+export interface RulesObject {
+    [key: string]: string;
+}
+export interface FormInstance {
+    isValidForm: boolean;
+    useRules(rules: any): void;
+    useLang(locale: string): void;
+    register(name: string, callbackFn: Validator.RegisterCallback, errorMessage: string): void;
+    registerAsync(name: string, callbackFn: Validator.RegisterAsyncCallback, errorMessage: string): void;
+    setMessages(langCode: Lang, values: object): void;
+    getMessages(langCode: Lang): object;
+    getDefaultLang(): string;
+    setAttributeFormatter(callbackFn: Function): void;
+    handleChangeEvent(event: React.ChangeEvent<HTMLInputElement>): void;
+    handleBlurEvent(event: React.FocusEvent<HTMLInputElement>): void;
+    handleSubmit(event: React.FormEvent): void;
+    validate(event: React.FormEvent): Promise<boolean>;
+}
+export declare function useFormInputValidation(fieldsObject?: FieldsObject, rulesObject?: RulesObject): Array<FieldsObject | ErrorsObject | FormInstance>;
+//# sourceMappingURL=useFormInputValidation.d.ts.map

dist/src/hooks/useFormInputValidation.d.ts.map

+{"version":3,"file":"useFormInputValidation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFormInputValidation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAEL,IAAI,EACL,MAAM,0CAA0C,CAAC;AAOlD,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AAKzC,MAAM,WAAW,YAAY;IAI3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,GAAG,CAAC;CACtE;AAKD,MAAM,WAAW,YAAY;IAI3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAID,MAAM,WAAW,WAAW;IAI1B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAID,MAAM,WAAW,YAAY;IAqB3B,WAAW,EAAE,OAAO,CAAC;IAmBrB,QAAQ,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IActB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAqB9B,QAAQ,CACN,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,SAAS,CAAC,gBAAgB,EACtC,YAAY,EAAE,MAAM,GACnB,IAAI,CAAC;IAmCR,aAAa,CACX,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,SAAS,CAAC,qBAAqB,EAC3C,YAAY,EAAE,MAAM,GACnB,IAAI,CAAC;IAoBR,WAAW,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAiBlD,WAAW,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC;IAYpC,cAAc,IAAI,MAAM,CAAC;IAiBzB,qBAAqB,CAAC,UAAU,EAAE,QAAQ,GAAG,IAAI,CAAC;IAqBlD,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAsBpE,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAiBjE,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IA6B3C,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACpD;AAcD,wBAAgB,sBAAsB,CACpC,YAAY,GAAE,YAAiB,EAC/B,WAAW,CAAC,EAAE,WAAW,GACxB,KAAK,CAAC,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC,CAgOnD"}

dist/src/index.d.ts.map

+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAuC,2BAA2B,EAChG,wBAAwB,IAAI,cAAc,EAAE,IAAI,EAAE,MAAM,yCAAyC,CAAC;AACtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,cAAM,wBAAyB,SAAQ,cAAc;IACjD,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAwB;IACtC,OAAO,CAAC,aAAa,CAA8B;gBAEvC,SAAS,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,QAAQ;IAS1D,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAIpC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,gBAAgB,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI;IAIjG,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,qBAAqB,EAAE,YAAY,EAAE,MAAM,GAAG,IAAI;IAI3G,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI;IAIzE,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM;IAI1C,MAAM,CAAC,cAAc,IAAI,MAAM;IAI/B,MAAM,CAAC,qBAAqB,CAAC,UAAU,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI;IAK5E,IAAW,YAAY,CAAC,QAAQ,EAAE,2BAA2B,EAO5D;IAED,IAAW,YAAY,IAAI,2BAA2B,CAErD;IAEM,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,IAAI;IAK9E,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,GAAG,IAAI;IAKjF,QAAQ,CAAC,KAAK,KAAA,GAAG,IAAI;IAIrB,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;IAW5D,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC;IAUzD,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS;IAc1C,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,QAAQ;IAkEhB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,QAAQ;CAKnB;AAED,OAAO,EACH,IAAI,EACJ,sBAAsB,EACzB,CAAC;AACF,eAAe,wBAAwB,CAAC"}

dist/src/specs/react-form-input-validator.spec.d.ts.map

+{"version":3,"file":"react-form-input-validator.spec.d.ts","sourceRoot":"","sources":["../../../src/specs/react-form-input-validator.spec.ts"],"names":[],"mappings":"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"}

dist/src/utils/utils.d.ts

+declare const getCheckboxValues: (element: HTMLInputElement) => Array<any>;
+declare const getRadioButtonValues: (element: HTMLInputElement) => string | boolean;
+declare const invalidateErrors: (data: any, errors: any) => void;
+declare const fillErrors: (validator: any) => object;
+export { getCheckboxValues, getRadioButtonValues, invalidateErrors, fillErrors };
+//# sourceMappingURL=utils.d.ts.map

dist/src/utils/utils.d.ts.map

+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,iBAAiB,YAAa,gBAAgB,KAAG,MAAM,GAAG,CAM/D,CAAC;AAMF,QAAA,MAAM,oBAAoB,YAAa,gBAAgB,KAAG,MAAM,GAAG,OAIlE,CAAC;AAOF,QAAA,MAAM,gBAAgB,kCAMrB,CAAC;AAOF,QAAA,MAAM,UAAU,sBAAgB,MAM/B,CAAC;AAEF,OAAO,EACH,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,UAAU,EACb,CAAC"}

dist/typedocconfig.d.ts.map

+{"version":3,"file":"typedocconfig.d.ts","sourceRoot":"","sources":["../typedocconfig.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,KAA4B,CAAC"}

CHANGELOG.md

@@ -11,2 +11,13 @@ # Introduction
 
+## [2.1.0] - 02/08/2022
+
+### Added
+
+- Introduced the hook support
+    - [`useFormInputValidation`](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/functions/Hooks.useFormInputValidation.html)
+
+### Fixed
+
+- Form validation with React Functional Component and useState Hooks - [#41](https://github.com/gokulakannant/react-form-input-validation/issues/41)
+
 ## [2.0.4] - 07/08/2020
@@ -13,0 +24,0 @@

dist/bundle.js

@@ -1,1 +0,1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("validatorjs"));else if("function"==typeof define&&define.amd)define(["validatorjs"],e);else{var n="object"==typeof exports?e(require("validatorjs")):e(t.validatorjs);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(window,function(n){return i={},o.m=r=[function(t,e,n){"use strict";var r,o=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),i=this&&this.__spreadArrays||function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var r=Array(t),o=0,e=0;e<n;e++)for(var i=arguments[e],s=0,a=i.length;s<a;s++,o++)r[o]=i[s];return r};Object.defineProperty(e,"__esModule",{value:!0}),e.Lang=void 0;var c=n(1),s=n(2);Object.defineProperty(e,"Lang",{enumerable:!0,get:function(){return s.Lang}});var a,u=(a=s.ReactFormInputValidation,o(f,a),f.useLang=function(t){c.useLang(t)},f.register=function(t,e,n){c.register(t,e,n)},f.registerAsync=function(t,e){c.registerAsync(t,e)},f.setMessages=function(t,e){c.setMessages(t,e)},f.getMessages=function(t){return c.getMessages(t)},f.getDefaultLang=function(){return c.getDefaultLang()},f.setAttributeFormatter=function(t){c.setAttributeFormatter(t)},Object.defineProperty(f.prototype,"onformsubmit",{get:function(){return this._onformsubmit},set:function(t){this._onformsubmit&&a.prototype.removeListener.call(this,"formsubmit",this._onformsubmit),this._onformsubmit=t,a.prototype.addListener.call(this,"formsubmit",this._onformsubmit)},enumerable:!1,configurable:!0}),f.prototype.addEventListener=function(t,e){return a.prototype.addListener.call(this,t,e),this},f.prototype.removeEventListener=function(t,e){return a.prototype.removeListener.call(this,t,e),this},f.prototype.useRules=function(t){this.rules=t},f.prototype.handleChangeEvent=function(t){var e,n=t.target.name;this.component&&n&&((e=Object.assign({},this.component.state.fields))[n]="checkbox"===t.target.type?this.getCheckboxValues(t.target):"radio"===t.target.type?this.getRadioButtonValues(t.target):t.target.value,this.component.setState({fields:e,isValidatorUpdate:!0}))},f.prototype.handleBlurEvent=function(t){var e=this,n=t.target;this.validate([n]).then(function(t){e.component&&e.component.hasOwnProperty("state")&&(e.errors=Object.assign(e.errors,t),e.component.setState({errors:e.errors,isValidatorUpdate:!0}))}).catch(function(t){return console.error(t)})},f.prototype.handleSubmit=function(t){var e=this;t.preventDefault(),this.validateForm(t.target).then(function(t){t&&a.prototype.emit.call(e,e.getEvent(e.component.state.fields))})},f.prototype.validateForm=function(n){var r=this;this.component&&this.component.state||(this.component.state={errors:{}});var o=[];return n.querySelectorAll("textarea,select,input:not([type='submit']):not([type='file']):not([data-ignore-validation])").forEach(function(t){o.push(t)}),new Promise(function(e){r.validate(o).then(function(t){r.errors=t,r.component.setState({errors:r.errors,isValidatorUpdate:!0}),Object.keys(r.component.state.errors)[0]&&n.querySelector('[name="'+Object.keys(r.component.state.errors)[0]+'"]')&&n.querySelector('[name="'+Object.keys(r.component.state.errors)[0]+'"]').focus(),e(0===Object.keys(r.component.state.errors).length)}).catch(function(t){return console.log(t)})})},f.prototype.getRadioButtonValues=function(t){var e=document.getElementsByName(t.name),n=i(e).filter(function(t){return!0===t.checked});return n[0]?n[0].value:""},f.prototype.getCheckboxValues=function(t){var e=document.getElementsByName(t.name),n=i(e).filter(function(t){return!0===t.checked}),r=[];return n.forEach(function(t){return r.push(t.value)}),r},f.prototype.validate=function(a){var u=this;return new Promise(function(t){var e={},r={},o={},i={},s=!1;a.forEach(function(t){var e,n=t.getAttribute("name");r[n]=u.component.state.fields[n],o[n]=u.rules[n],o[n]||(console.warn("Rule is not defind for "+n),o[n]=""),n.endsWith("_confirmation")&&(e=n.slice(0,n.indexOf("_confirmation")),r[e]=u.component.state.fields[e]),t.hasAttribute("data-attribute-name")&&(i[n]=t.getAttribute("data-attribute-name")),t.hasAttribute("data-async")&&(s=!0)});var n=new c(r,o);if(n.setAttributeNames(i),!s)return n.fails()?e=u.fillErrors(n):u.invalidateErrors(r),t(e);n.checkAsync(function(){u.invalidateErrors(r),t(e)},function(){e=u.fillErrors(n),t(e)})})},f.prototype.fillErrors=function(e){var n={};return Object.keys(e.errors.all()).forEach(function(t){n[t]=e.errors.first(t)}),n},f.prototype.invalidateErrors=function(t){var e=this;Object.keys(t).forEach(function(t){delete e.errors[t]})},f.prototype.getEvent=function(t){return new CustomEvent("formsubmit",{detail:t})},f);function f(t,e){var n=a.call(this,t,e)||this;return n.rules={},n.errors={},f.useLang(e&&e.locale?e.locale:"en"),n.component=t,n.handleChangeEvent=n.handleChangeEvent.bind(n),n.handleSubmit=n.handleSubmit.bind(n),n.handleBlurEvent=n.handleBlurEvent.bind(n),n}e.default=u},function(t,e){t.exports=n},function(t,e,n){"use strict";var r,o,i=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)});Object.defineProperty(e,"__esModule",{value:!0}),e.ReactFormInputValidation=e.Lang=void 0,(o=e.Lang||(e.Lang={})).ar="ar",o.az="az",o.be="be",o.bg="bg",o.bs="bs",o.ca="ca",o.cs="cs",o.cy="cy",o.da="da",o.de="de",o.el="el",o.en="en",o.es="es",o.et="et",o.eu="eu",o.fa="fa",o.fi="fi",o.fr="fr",o.hr="hr",o.hu="hu",o.id="id",o.it="it",o.ja="ja",o.ka="ka",o.ko="ko",o.It="It",o.Iv="Iv",o.mk="mk",o.mn="mn",o.ms="ms",o.nb_NO="nb_NO",o.nl="nl",o.pl="pl",o.pt="pt",o.pt_BR="pt_BR",o.ro="ro",o.ru="ru",o.se="se",o.sl="sl",o.sq="sq",o.sr="sr",o.sv="sv",o.tr="tr",o.ua="ua",o.uk="uk",o.vi="vi",o.zh="zh",o.zh_TW="zh_TW";var s,a=(u.prototype.addListener=function(t,e){t in this.listeners||(this.listeners[t]=[]),this.listeners[t].push(e)},u.prototype.removeListener=function(t,e){if(t in this.listeners)for(var n=this.listeners[t],r=0,o=n.length;r<o;r++)if(n[r]===e)return void n.splice(r,1)},u.prototype.emit=function(t){if(!(t.type in this.listeners))return!0;for(var e=this.listeners[t.type].slice(),n=0,r=e.length;n<r;n++)e[n].call(this,t.detail);return!t.defaultPrevented},u);function u(){this.listeners={}}var c,f=(i(l,c=a),l.useLang=function(t){},l.register=function(t,e,n){},l.registerAsync=function(t,e){},l.setMessages=function(t,e){},l.getMessages=function(t){return s},l.getDefaultLang=function(){return s},l.setAttributeFormatter=function(t){},l.prototype.addEventListener=function(t,e){return s},l.prototype.removeEventListener=function(t,e){return s},l.prototype.useRules=function(t){},l.prototype.handleChangeEvent=function(t){},l.prototype.handleBlurEvent=function(t){},l.prototype.handleSubmit=function(t){},l);function l(t,e){return c.call(this)||this}e.ReactFormInputValidation=f}],o.c=i,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0);function o(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return r[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}var r,i});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("validatorjs"));else if("function"==typeof define&&define.amd)define(["react","validatorjs"],e);else{var n="object"==typeof exports?e(require("react"),require("validatorjs")):e(t.react,t.validatorjs);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(window,function(t,e){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e,n){"use strict";n.r(e),n.d(e,"Lang",function(){return r}),n.d(e,"useFormInputValidation",function(){return v});var r,o=n(1),i=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(e,n)};return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}();!function(t){t.ar="ar",t.az="az",t.be="be",t.bg="bg",t.bs="bs",t.ca="ca",t.cs="cs",t.cy="cy",t.da="da",t.de="de",t.el="el",t.en="en",t.es="es",t.et="et",t.eu="eu",t.fa="fa",t.fi="fi",t.fr="fr",t.hr="hr",t.hu="hu",t.id="id",t.it="it",t.ja="ja",t.ka="ka",t.ko="ko",t.It="It",t.Iv="Iv",t.mk="mk",t.mn="mn",t.ms="ms",t.nb_NO="nb_NO",t.nl="nl",t.pl="pl",t.pt="pt",t.pt_BR="pt_BR",t.ro="ro",t.ru="ru",t.se="se",t.sl="sl",t.sq="sq",t.sr="sr",t.sv="sv",t.tr="tr",t.ua="ua",t.uk="uk",t.vi="vi",t.zh="zh",t.zh_TW="zh_TW"}(r||(r={}));var a,u=function(t){function e(e,n){return t.call(this)||this}return i(e,t),e.useLang=function(t){},e.register=function(t,e,n){},e.registerAsync=function(t,e,n){},e.setMessages=function(t,e){},e.getMessages=function(t){return a},e.getDefaultLang=function(){return a},e.setAttributeFormatter=function(t){},e.prototype.addEventListener=function(t,e){return a},e.prototype.removeEventListener=function(t,e){return a},e.prototype.useRules=function(t){},e.prototype.handleChangeEvent=function(t){},e.prototype.handleBlurEvent=function(t){},e.prototype.handleSubmit=function(t){},e}(function(){function t(){this.listeners={}}return t.prototype.addListener=function(t,e){t in this.listeners||(this.listeners[t]=[]),this.listeners[t].push(e)},t.prototype.removeListener=function(t,e){if(t in this.listeners)for(var n=this.listeners[t],r=0,o=n.length;r<o;r++)if(n[r]===e)return void n.splice(r,1)},t.prototype.emit=function(t){if(!(t.type in this.listeners))return!0;for(var e=this.listeners[t.type].slice(),n=0,r=e.length;n<r;n++)e[n].call(this,t.detail);return!t.defaultPrevented},t}()),c=n(0),s=function(t,e,n){if(n||2===arguments.length)for(var r,o=0,i=e.length;o<i;o++)!r&&o in e||(r||(r=Array.prototype.slice.call(e,0,o)),r[o]=e[o]);return t.concat(r||Array.prototype.slice.call(e))},f=function(t){var e=document.getElementsByName(t.name),n=[];return s([],e,!0).filter(function(t){return!0===t.checked}).forEach(function(t){return n.push(t.value)}),n},l=function(t){var e=document.getElementsByName(t.name),n=s([],e,!0).filter(function(t){return!0===t.checked});return n[0]?n[0].value:""},p=function(t,e){Object.keys(t).forEach(function(t){delete e[t]})},h=function(t){var e={};return Object.keys(t.errors.all()).forEach(function(n){e[n]=t.errors.first(n)}),e},b=function(){return(b=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},d=function(t,e,n,r){return new(n||(n=Promise))(function(o,i){function a(t){try{c(r.next(t))}catch(t){i(t)}}function u(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){t.done?o(t.value):function(t){return t instanceof n?t:new n(function(e){e(t)})}(t.value).then(a,u)}c((r=r.apply(t,e||[])).next())})},y=function(t,e){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function u(i){return function(u){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=(o=a.trys).length>0&&o[o.length-1])&&(6===i[0]||2===i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=e.call(t,a)}catch(t){i=[6,t],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}};function v(t,e){var n=this;void 0===t&&(t={});var r=Object(c.useRef)(t),i=Object(c.useRef)({}),a=Object(c.useState)(e||{}),u=a[0],s=a[1],v=Object(c.useState)(r.current),m=v[0],g=v[1],j=Object(c.useState)(i.current),O=j[0],k=j[1],_=Object(c.useState)(!1),E=_[0],w=_[1],A=Object(c.useCallback)(function(t){s(t)},[]),x=Object(c.useCallback)(function(t){o.useLang(t)},[]),S=Object(c.useCallback)(function(t,e,n){o.register(t,e,n)},[]),L=Object(c.useCallback)(function(t,e,n){o.registerAsync(t,e,n)},[]),C=Object(c.useCallback)(function(t,e){o.setMessages(t,e)},[]),P=Object(c.useCallback)(function(t){return o.getMessages(t)},[]),M=Object(c.useCallback)(function(){return o.getDefaultLang()},[]),q=Object(c.useCallback)(function(t){o.setAttributeFormatter(t)},[]),B=Object(c.useCallback)(function(t){var e=t.target.name;if(e){var n="checkbox"===t.target.type?f(t.target):"radio"===t.target.type?l(t.target):t.target.value;r.current[e]=n,g(function(t){var r;return b(b({},t),((r={})[e]=n,r))})}},[]),F=function(t){return new Promise(function(e){var n={},r={},a={},c=!1;t.forEach(function(t){var e=t.getAttribute("name");if(n[e]=m[e],r[e]=u[e],r[e]||(console.warn("Rule is not defind for ".concat(e)),r[e]=""),e.endsWith("_confirmation")){var o=e.slice(0,e.indexOf("_confirmation"));n[o]=m[o]}t.hasAttribute("data-attribute-name")&&(a[e]=t.getAttribute("data-attribute-name")),t.hasAttribute("data-async")&&(c=!0)});var s=new o(n,r);if(s.setAttributeNames(a),!c){if(s.fails()){var f=h(s);return e(b(b({},O),f))}return p(n,i.current),e(i.current)}s.checkAsync(function(){p(n,i.current),e(i.current)},function(){var t=h(s);e(b(b({},O),t))})})},R=Object(c.useCallback)(function(t){var e=t.target;F([e]).then(function(t){Object.entries(t).forEach(function(t){var e=t[0],n=t[1];i.current[e]=n}),k(function(e){return b(b({},e),t)})}).catch(function(t){return console.error(t)})},[]),D=Object(c.useCallback)(function(t){return d(n,void 0,void 0,function(){return y(this,function(e){return t.preventDefault(),[2,new Promise(function(e){(function(t){var e=[];return t.querySelectorAll("textarea,select,input:not([type='submit']):not([type='file']):not([data-ignore-validation])").forEach(function(t){e.push(t)}),new Promise(function(t){F(e).then(function(e){Object.entries(e).forEach(function(t){var e=t[0],n=t[1];i.current[e]=n}),k(function(t){return b(b({},t),e)}),t(0===Object.keys(e).length)}).catch(function(t){return console.log(t)})})})(t.target).then(function(t){t&&w(!0),e(t)})})]})})},[]);return[Object(c.useMemo)(function(){return m},[]),Object(c.useMemo)(function(){return O},[]),Object(c.useMemo)(function(){return{isValidForm:E,useRules:A,useLang:x,register:S,registerAsync:L,setMessages:C,setAttributeFormatter:q,getMessages:P,getDefaultLang:M,handleChangeEvent:B,handleBlurEvent:R,handleSubmit:D,validate:D}},[E])]}var m=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(e,n)};return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),g=function(t){function e(n,r){var o=t.call(this,n,r)||this;return o.rules={},o.errors={},e.useLang(r&&r.locale?r.locale:"en"),o.component=n,o.handleChangeEvent=o.handleChangeEvent.bind(o),o.handleSubmit=o.handleSubmit.bind(o),o.handleBlurEvent=o.handleBlurEvent.bind(o),o}return m(e,t),e.useLang=function(t){o.useLang(t)},e.register=function(t,e,n){o.register(t,e,n)},e.registerAsync=function(t,e,n){o.registerAsync(t,e,n)},e.setMessages=function(t,e){o.setMessages(t,e)},e.getMessages=function(t){return o.getMessages(t)},e.getDefaultLang=function(){return o.getDefaultLang()},e.setAttributeFormatter=function(t){o.setAttributeFormatter(t)},Object.defineProperty(e.prototype,"onformsubmit",{get:function(){return this._onformsubmit},set:function(e){this._onformsubmit&&t.prototype.removeListener.call(this,"formsubmit",this._onformsubmit),this._onformsubmit=e,t.prototype.addListener.call(this,"formsubmit",this._onformsubmit)},enumerable:!1,configurable:!0}),e.prototype.addEventListener=function(e,n){return t.prototype.addListener.call(this,e,n),this},e.prototype.removeEventListener=function(e,n){return t.prototype.removeListener.call(this,e,n),this},e.prototype.useRules=function(t){this.rules=t},e.prototype.handleChangeEvent=function(t){var e=t.target.name;if(this.component&&e){var n=Object.assign({},this.component.state.fields);n[e]="checkbox"===t.target.type?f(t.target):"radio"===t.target.type?l(t.target):t.target.value,this.component.setState({fields:n,isValidatorUpdate:!0})}},e.prototype.handleBlurEvent=function(t){var e=this,n=t.target;this.validate([n]).then(function(t){e.component&&e.component.hasOwnProperty("state")&&(e.errors=Object.assign(e.errors,t),e.component.setState({errors:e.errors,isValidatorUpdate:!0}))}).catch(function(t){return console.error(t)})},e.prototype.handleSubmit=function(e){var n=this;e.preventDefault(),this.validateForm(e.target).then(function(e){e&&t.prototype.emit.call(n,n.getEvent(n.component.state.fields))})},e.prototype.validateForm=function(t){var e=this;this.component&&this.component.state||(this.component.state={errors:{}});var n=[];return t.querySelectorAll("textarea,select,input:not([type='submit']):not([type='file']):not([data-ignore-validation])").forEach(function(t){n.push(t)}),new Promise(function(r){e.validate(n).then(function(n){e.errors=n,e.component.setState({errors:e.errors,isValidatorUpdate:!0}),Object.keys(e.component.state.errors)[0]&&t.querySelector('[name="'.concat(Object.keys(e.component.state.errors)[0],'"]'))&&t.querySelector('[name="'.concat(Object.keys(e.component.state.errors)[0],'"]')).focus(),r(0===Object.keys(e.component.state.errors).length)}).catch(function(t){return console.log(t)})})},e.prototype.validate=function(t){var e=this;return new Promise(function(n){var r={},i={},a={},u={},c=!1;t.forEach(function(t){var n=t.getAttribute("name");if(i[n]=e.component.state.fields[n],a[n]=e.rules[n],a[n]||(console.warn("Rule is not defind for ".concat(n)),a[n]=""),n.endsWith("_confirmation")){var r=n.slice(0,n.indexOf("_confirmation"));i[r]=e.component.state.fields[r]}t.hasAttribute("data-attribute-name")&&(u[n]=t.getAttribute("data-attribute-name")),t.hasAttribute("data-async")&&(c=!0)});var s=new o(i,a);if(s.setAttributeNames(u),!c)return s.fails()?(r=h(s),n(r)):(e.invalidateErrors(i),n(r));s.checkAsync(function(){e.invalidateErrors(i),n(r)},function(){r=h(s),n(r)})})},e.prototype.invalidateErrors=function(t){var e=this;Object.keys(t).forEach(function(t){delete e.errors[t]})},e.prototype.getEvent=function(t){return new CustomEvent("formsubmit",{detail:t})},e}(u);e.default=g}])});

dist/src/index.d.ts

 /// <reference types="react" />
+import * as Validator from "validatorjs";
 import { IReactComponent, IOptions, ReactFormSubmitEventHandler, ReactFormInputValidation as BaseValidation, Lang } from "./specs/react-form-input-validator.spec";
+import { useFormInputValidation } from "./hooks/useFormInputValidation";
 declare class ReactFormInputValidation extends BaseValidation {
@@ -10,8 +12,8 @@ private component;
     static useLang(locale: string): void;
-    static register(name: string, callbackFn: Function, errorMessage: string): void;
-    static registerAsync(name: string, callbackFn: Function): void;
-    static setMessages(langCode: Lang, values: object): void;
+    static register(name: string, callbackFn: Validator.RegisterCallback, errorMessage: string): void;
+    static registerAsync(name: string, callbackFn: Validator.RegisterAsyncCallback, errorMessage: string): void;
+    static setMessages(langCode: Lang, values: Validator.ErrorMessages): void;
     static getMessages(langCode: Lang): object;
-    static getDefaultLang(): Lang;
-    static setAttributeFormatter(callbackFn: Function): void;
+    static getDefaultLang(): string;
+    static setAttributeFormatter(callbackFn: Validator.AttributeFormatter): void;
     set onformsubmit(callback: ReactFormSubmitEventHandler);
@@ -26,10 +28,8 @@ get onformsubmit(): ReactFormSubmitEventHandler;
     private validateForm;
-    private getRadioButtonValues;
-    private getCheckboxValues;
     private validate;
-    private fillErrors;
     private invalidateErrors;
     private getEvent;
 }
-export { Lang };
+export { Lang, useFormInputValidation };
 export default ReactFormInputValidation;
+//# sourceMappingURL=index.d.ts.map

dist/src/specs/react-form-input-validator.spec.d.ts

@@ -1,2 +0,3 @@
-import { Component } from "react";
+import React, { Component } from "react";
+import * as Validator from "validatorjs";
 export interface IDynamicKeyValues {
@@ -82,7 +83,7 @@ [key: string]: any;
     static useLang(locale: string): void;
-    static register(name: string, callbackFn: Function, errorMessage: string): void;
-    static registerAsync(name: string, callbackFn: Function): void;
+    static register(name: string, callbackFn: Validator.RegisterCallback, errorMessage: string): void;
+    static registerAsync(name: string, callbackFn: Validator.RegisterAsyncCallback, errorMessage: string): void;
     static setMessages(langCode: Lang, values: object): void;
     static getMessages(langCode: Lang): object;
-    static getDefaultLang(): Lang;
+    static getDefaultLang(): string;
     static setAttributeFormatter(callbackFn: Function): void;
@@ -97,1 +98,2 @@ addEventListener(event: string, callback: (...args: Array<any>) => void): this;
 export {};
+//# sourceMappingURL=react-form-input-validator.spec.d.ts.map

package.json

 {
   "name": "react-form-input-validation",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "A validator package to validate the react forms",
   "main": "./dist/bundle.js",
+  "types": "./dist/src/index.d.ts",
   "license": "GPLv3",
@@ -38,7 +39,10 @@ "author": "gokulakannant <[e-mail]> (https://gokulakannant.github.io)",
     "@types/validatorjs": "^3.15.0",
+    "babel-loader": "^8.2.5",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
     "ts-loader": "^6.2.1",
     "tslint": "^6.0.0-beta0",
-    "typedoc": "^0.15.0",
-    "typescript": "^3.6.4",
-    "uglifyjs-webpack-plugin": "^2.2.0",
+    "typedoc": "^0.23.10",
+    "typescript": "^4.6.4",
+    "uglifyjs-webpack-plugin": "^1.1.2",
     "webpack": "^4.41.2",
@@ -48,4 +52,7 @@ "webpack-cli": "^3.3.9"
   "dependencies": {
-    "validatorjs": "^3.18.1"
+    "validatorjs": "^3.22.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0"
   }
 }

README.md

@@ -7,7 +7,8 @@ # React Form Input Validation
 
-A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms. It uses the [Controlled Components](https://reactjs.org/docs/forms.html#controlled-components) approach for validation.
+A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms. It uses the both [Controlled Components](https://reactjs.org/docs/forms.html#controlled-components) and React Hooks approach for validation.
 
 * [Available Rules](Rules.md)
 * [Documentation](https://gokulakannant.github.io/react-form-input-validation/index.html)
-* [Demo](https://codesandbox.io/s/react-form-input-validation-demp-hyuju?fontsize=14&hidenavigation=1&theme=dark) (in CodeSandbox)
+* [Demo - Class Components](https://codesandbox.io/s/react-form-input-validation-demp-hyuju?fontsize=14&hidenavigation=1&theme=dark) (in CodeSandbox)
+* [Demo - Functional Components](https://codesandbox.io/s/useforminputvalidation-kn0xe3) (in CodeSandbox)
 
@@ -18,2 +19,3 @@ ## Why use react-form-input-validation?
 * Auto Controlled State.
+* Able to use in both State and Stateless components.
 * Compatible with libraries like [Material UI](https://material-ui.com/), and etc.
@@ -42,4 +44,6 @@ * Readable and declarative validation rules which is inspired by laravel framework.
 
-A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/classes/reactforminputvalidation.html).
+### Class component
 
+The given below example is for Class component. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/classes/ReactFormInputValidation.ReactFormInputValidation.html).
+
 ```js
@@ -130,2 +134,179 @@ import React from "react";
 
+### Functional Component
+
+The given below example is for Functional component with the usage of hooks. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/functions/Hooks.useFormInputValidation.html).
+
+#### Example 1
+
+```js
+import React from "react";
+import { useFormInputValidation } from "react-form-input-validation";
+
+const ValidationForm = () => {
+  const [fields, errors, form] = useFormInputValidation({
+    customer_name: "",
+    email_address: "",
+    phone_number: "",
+  }, {
+    customer_name: "required",
+    email_address: "required|email",
+    phone_number: "required|numeric|digits_between:10,12"
+  });
+
+  const onSubmit = async (event) => {
+    const isValid = await form.validate(event);
+    if (isValid) {
+      // console.log(fields, errors);
+      // Perform api call here
+    }
+  }
+  
+  return <div style={{maxWidth: "600px", margin: "0 auto"}}>
+  <h3>React Form Input Validation - validate</h3>
+  <form
+    className="myForm"
+    noValidate
+    autoComplete="off"
+    onSubmit={onSubmit}
+  >
+    <p>
+      <label>
+        Name
+        <input
+          type="text"
+          name="customer_name"
+          onBlur={form.handleBlurEvent}
+          onChange={form.handleChangeEvent}
+          value={state.fields.customer_name}
+      />
+      </label>
+      <label className="error">
+        {errors.customer_name
+          ? errors.customer_name
+          : ""}
+      </label>
+    </p>
+
+    <p>
+      <label>
+        Phone
+        <input
+          type="tel"
+          name="phone_number"
+          onBlur={form.handleBlurEvent}
+          onChange={form.handleChangeEvent}
+          value={fields.phone_number}
+        />
+      </label>
+      <label className="error">
+        {errors.phone_number
+          ? errors.phone_number
+          : ""}
+      </label>
+    </p>
+
+    <p>
+      <label>
+        Email
+        <input
+          type="email"
+          name="email_address"
+          onBlur={form.handleBlurEvent}
+          onChange={form.handleChangeEvent}
+          value={fields.email_address}
+        />
+      </label>
+      <label className="error">
+        {errors.email_address
+          ? errors.email_address
+          : ""}
+      </label>
+    </p>
+
+    <p>
+      <button type="submit">Submit</button>
+    </p>
+  </form>
+</div>
+}
+
+export default ValidationForm;
+```
+
+#### Example 2
+
+```js
+import React from "react";
+import { useFormInputValidation } from "react-form-input-validation";
+
+const ValidationForm2 = () => {
+    const [fields, errors, form] = useFormInputValidation({
+      email_address: "",
+      password: "",
+    }, {
+      email_address: "required|email",
+      password: "required"
+    });
+  
+    useEffect(() => {
+      if (form.isValidForm) {
+        // console.log(fields, errors, form);
+        // Perform api call here
+      }
+    }, [])
+    
+    return <div style={{maxWidth: "600px", margin: "0 auto"}}>
+    <h3>React Form Input Validation - usage of form.isValidForm</h3>
+    <form
+      className="myForm"
+      noValidate
+      autoComplete="off"
+      onSubmit={form.handleSubmit}
+    >
+      <p>
+        <label>
+          Email
+          <input
+            type="email"
+            name="email_address"
+            onBlur={form.handleBlurEvent}
+            onChange={form.handleChangeEvent}
+            value={fields.email_address}
+          />
+        </label>
+        <label className="error">
+          {errors.email_address
+            ? errors.email_address
+            : ""}
+        </label>
+      </p>
+  
+      <p>
+        <label>
+          Password
+          <input
+            type="tel"
+            name="password"
+            onBlur={form.handleBlurEvent}
+            onChange={form.handleChangeEvent}
+            value={fields.password}
+          />
+        </label>
+        <label className="error">
+          {errors.password
+            ? errors.password
+            : ""}
+        </label>
+      </p>
+  
+      <p>
+        <button type="submit">Submit</button>
+      </p>
+    </form>
+  </div>
+  }
+  
+  export default ValidationForm2;
+```
+
 ## Custom attribute name
@@ -132,0 +313,0 @@

VERSIONS.md

@@ -11,2 +11,3 @@ # React Form Input Validation Versions
 |--------|---------|--------|
+|v2.1.0|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.1.0/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.1.0)|
 |v2.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.1)|
@@ -13,0 +14,0 @@ |v2.0.0|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.0)|

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84385

27.62%

Number of package files

16

77.78%

Lines of code

161

25.78%

Number of lines in readme file

364

98.91%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

2

100%

Dev dependency count

13

30%

Dependency changes

• + Added

  react@19.2.7
  (transitive)

• Updated

  validatorjs@^3.22.1