react-form-toolkit/dist/main.min.js

A form validation toolkit for React, specializing in simple to medium-sized, secure forms. It provides an easy-to-use API to validate form inputs and ensure data integrity.

import e,{useReducer as t,useRef as r,useEffect as n,useCallback as a,useMemo as i}from"react";var o,l;function s(e,t){switch(t.type){case"SET_FORM_STATE":return{...e,formState:{...e.formState,...t.payload}};case"VALIDATE_FIELD":return{...e,formValidation:{...e.formValidation,[t.field]:t.error}};case"VALIDATE_FORM":return{...e,formValidation:t.validation};case"BLUR_FIELD":{const r=new Set(e.touchedFields);r.add(t.field);const n={...e.formValidation,[t.field]:t.error},a={...e.errors};return null===t.error?delete a[t.field]:a[t.field]=t.error,{...e,touchedFields:r,formValidation:n,errors:a}}case"SUBMIT_FORM":{const r={};for(const e in t.validation)null!==t.validation[e]&&(r[e]=t.validation[e]);return{...e,formValidation:t.validation,errors:r,isSubmitted:!0}}case"RESET":return{formState:t.initialForm,formValidation:{},isSubmitted:!1,touchedFields:new Set,dirtyFields:new Set,errors:{}};default:return e}}function u(e={},l={}){const[u,d]=t(s,{formState:e,formValidation:{},isSubmitted:!1,touchedFields:new Set,dirtyFields:new Set,errors:{}}),{formState:c,formValidation:f,isSubmitted:m,touchedFields:p,dirtyFields:F,errors:S}=u,h=r(new Set),A=r(!0),y=r(null),V=r(0);n((()=>{V.current+=1})),n((()=>()=>{A.current=!1}),[]);const E=a((async(e,t)=>{if(!l[e])return null;const[r,n]=l[e];return await r(t)?null:n}),[l]),v=a((async e=>{const t={};for(const r in l){const[n,a]=l[r],i=e[r],o=await n(i);t[r]=o?null:a}return t}),[l]);n((()=>{y.current=function(e,t){let r=null;return(...n)=>{r&&clearTimeout(r),r=setTimeout((()=>{e(...n)}),t)}}((async e=>{if(A.current){const t=await v(e);d({type:"VALIDATE_FORM",validation:t})}}),500)}),[v]);const b=r(!0);n((()=>{b.current?b.current=!1:y.current&&y.current(c)}),[c]);const I=i((()=>{if(0===Object.keys(c).length)return!1;for(const e of Object.keys(f))if(null!==f[e])return!1;return!0}),[f,c]),T=a((e=>(h.current.add(e),()=>h.current.delete(e))),[]);a((()=>{h.current.forEach((e=>e()))}),[]);const g=a((t=>{const{name:r,value:n,type:a,checked:i,files:l}=t.target,s=e[r];let u=n;a===o.CHECKBOX?u=i:a===o.FILE&&l?u=l[0]:"number"==typeof s&&(u=Number(n)),c[r]!==u&&d({type:"SET_FORM_STATE",payload:{[r]:u}})}),[c,e]),w=a((()=>{d({type:"RESET",initialForm:e})}),[e]),R=a((async e=>{const{name:t}=e.target,r=c[t],n=await E(t,r);d({type:"BLUR_FIELD",field:t,error:n})}),[c,E]),M=a((e=>async t=>{t.preventDefault();const r=await v(c);d({type:"SUBMIT_FORM",validation:r});if(Object.values(r).every((e=>null===e))){const t=e(c);t instanceof Promise&&await t}}),[c,v]);return{formState:c,setFormState:e=>d({type:"SET_FORM_STATE",payload:e}),onInputChange:g,onResetForm:w,formValidation:f,errors:S,isFormValid:I,handleSubmit:M,isSubmitted:m,onBlur:R,touchedFields:p,dirtyFields:F,subscribe:T}}!function(e){e.TEXT="text",e.NUMBER="number",e.CHECKBOX="checkbox",e.FILE="file",e.STRING="string"}(o||(o={})),function(e){e.Required="This field is required",e.InvalidEmail="Invalid email address",e.WeakPassword="Password must be at least 8 characters long and include one uppercase letter, one lowercase letter, one number, and one special character",e.InvalidPhoneNumber="Invalid phone number",e.InvalidZipCode="Invalid US zip code",e.InvalidUrl="Invalid URL",e.InvalidDate="Invalid date format",e.MinValue="Value is too low",e.MaxValue="Value is too high",e.MinLength="Value is too short",e.MaxLength="Value is too long",e.NotANumber="Value is not a number",e.NotABoolean="Value is not a boolean",e.NotAString="Value is not a string",e.NotAnImage="Value is not an image",e.NotTrue="Value is not true",e.NotFalse="Value is not false"}(l||(l={}));const d=({errors:t,children:r})=>{const n=r=>e.Children.map(r,(r=>{if(!e.isValidElement(r))return r;if(r.props.name){const n=r.props.name,a=t[`${n}`];return e.createElement("div",null,e.cloneElement(r,r.props),a&&e.createElement("div",{key:`error-${n}`,style:{color:null===a?"":"red"}},a))}return r.props.children?e.cloneElement(r,{...r.props,children:n(r.props.children)}):r}));return e.createElement("div",null,n(r))},c=e=>(e=>null===e)(e)||p(e),f=e=>"number"==typeof e,m=e=>"string"==typeof e,p=e=>void 0===e,F=e=>{if(!1===m(e))return!1;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)},S=e=>(t,r)=>!(!r||!r[e])&&t===r[e],h={isValidDate:e=>{if(m(e)){const t=Date.parse(e);return!isNaN(t)}return!1},isValidPhoneNumber:e=>{if(m(e)){return/^\+?\d{10,15}$/.test(e)}return!1},isValidUSZipCode:e=>{if(m(e)){return/^\d{5}(-\d{4})?$/.test(e)}return!1},isValidEmail:F,minimunQuantity:e=>t=>!!f(t)&&t>=e,min:e=>t=>!0===f(t)?t>=e:!0===m(t)&&t.length>=e,max:e=>t=>f(t)?t<=e:!!m(t)&&t.length<=e,maximumQuantity:e=>t=>!!f(t)&&t<=e,validateStrongPassword:e=>/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(e),required:e=>!c(e)&&""!==e,isImage:e=>!!(e=>e instanceof File)(e)&&e.type.includes("image"),equalTo:e=>t=>t===e,isNumber:e=>f(e),isBoolean:e=>(e=>"boolean"==typeof e)(e),isString:e=>m(e),pattern:e=>t=>!!m(t)&&e.test(t),optional:e=>t=>!(!c(t)&&""!==t)||e(t),isTrue:e=>!0===e,isFalse:e=>!1===e,isValidUrl:e=>{if(m(e))try{return new URL(e),!0}catch(e){return!1}return!1},isCreditCard:e=>{if(m(e)){const t=e.replace(/[\s-]/g,"");let r=0,n=!1;for(let e=t.length-1;e>=0;e--){let a=parseInt(t[e]);n&&(a*=2,a>9&&(a-=9)),r+=a,n=!n}return r%10==0}return!1},isBase64:e=>{if(m(e)){return/^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/.test(e)}return!1},isIP:e=>{if(m(e)){return/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:))$/.test(e)}return!1},passwordsMatch:S};export{d as FormValidate,o as InputType,l as defaultErrorMessage,F as isValidEmail,S as passwordsMatch,u as useForm,h as v};
//# sourceMappingURL=main.min.js.map