@prototyp/skeletor 1.0.5 → 1.0.6

package/README.md

@@ -252,6 +252,12 @@ Flexible in its function, supports multiple validation approaches through callba
 2. To trigger standalone validation, use `validate("prop")`
 3. Validate entire form with `validateForm()`
 
+The order of importance when it comes to validating fields is:
+
+1. Custom validation rule - will get the value as-is for your rule to validate it fully. The configuration rule receives the current value, state and optional flag values for you to validate against.
+2. If there is no custom validation rule and the primitive value check returns false (there is no value), check if the field is optional. If optional, the validation result is `true`, otherwise it is `false`;
+3. If all previous checks have not been triggered, return the primitive "has value" check result. This will return `false` for values such as: `null | undefined | NaN | "" | Invalid Date`. This will return `true` if you have a complex value type such as `object | Array`, <b>so in case you have a complex value type use a custom validation rule to get what you need</b>.
+
 #### Example 1: Simple use case with standalone validation on blur:
 
 ```javascript
@@ -321,7 +327,7 @@ const { state, validation, update, validate } = useForm(
 	optional: ["middleName"],
 	// validation.lastName is invalid if lastName is <3 characters long
 	// state can be used to compare with other values (ie repeat password)
-	rules: { lastName: (value, state) => value.length >= 3,
+	rules: { lastName: (value, state, optional) => value.length >= 3,
 }
 ```
 

package/lib/module/hooks/useForm.js

@@ -108,32 +108,47 @@ export function useForm(values, config) {
 /** Helper hook to validate form state outside of the scope of useForm. */
 export function useFormUtils(config) {
   function doesValueExist(value) {
-    if (value === null || value === undefined || value === "" || value < 0) {
+    if (value === undefined || value === null) {
       return false;
     }
-    return true;
-  }
-  function validateByRule(key, value, state) {
-    // If rule exists, validate with rule
-    if (config !== null && config !== void 0 && config.rules && config.rules[key]) {
-      var _config$rules$key, _config$rules;
-      return (_config$rules$key = (_config$rules = config.rules)[key]) === null || _config$rules$key === void 0 ? void 0 : _config$rules$key.call(_config$rules, value, state);
+    if (typeof value === "string") {
+      return value !== "";
+    }
+    if (typeof value === "number") {
+      return value >= 0 || value < 0 || !isNaN(value);
+    }
+    if (value instanceof Date) {
+      return !isNaN(value.valueOf());
     }
-    // else return true because we know the value exists already.
     return true;
   }
   function isOptional(key) {
     var _config$optional;
-    return config === null || config === void 0 ? void 0 : (_config$optional = config.optional) === null || _config$optional === void 0 ? void 0 : _config$optional.includes(key);
+    return (config === null || config === void 0 ? void 0 : (_config$optional = config.optional) === null || _config$optional === void 0 ? void 0 : _config$optional.includes(key)) || false;
   }
+
+  /** Validate by custom validation rule. If the rule does not exist, returns undefined. */
+  function validateByRule(key, value, state) {
+    var _config$rules, _config$rules$key;
+    return config === null || config === void 0 ? void 0 : (_config$rules = config.rules) === null || _config$rules === void 0 ? void 0 : (_config$rules$key = _config$rules[key]) === null || _config$rules$key === void 0 ? void 0 : _config$rules$key.call(_config$rules, value, state, isOptional(key));
+  }
+
+  /** Handles validation for a specific form field.
+   * Order of priority:
+   * 1. If there is a custom validation rule, always use that to preserve all possible type values
+   * 2. If there is no value (is a falsy value), check if the field is optional
+   * 3. Fallback to simple truthy value check if all other checks are not triggered. */
   function fieldValidation(key, value, state) {
+    var _config$rules2;
     const hasValue = doesValueExist(value);
     const optional = isOptional(key);
-    if (!hasValue) {
-      return !!optional;
-    } else {
-      return validateByRule(key, value, state);
-    }
+
+    // If form has custom validation rule, always trigger only that.
+    if (!!(config !== null && config !== void 0 && (_config$rules2 = config.rules) !== null && _config$rules2 !== void 0 && _config$rules2[key])) return validateByRule(key, value, state);
+    // If value does not exist (is null, undefined or other falsy value), check if field is optional.
+    if (!hasValue) return !!optional;
+    // Fallback, simple check if value exists
+    return hasValue;
   }
   function stateValidation(state) {
     const keys = Object.keys(state).map(key => key);

package/lib/module/hooks/useForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","useForm","values","config","keys","Object","validation","setValidation","initialState","setInitialState","state","setState","fieldValidation","stateValidation","isOptional","useFormUtils","changed","filter","key","length","updatedState","forEach","update","value","shouldValidate","s","undefined","validate","validateForm","formValidationState","valid","isFormValid","some","resetState","resetInitialValues","resetValidation","clearForm","doesValueExist","validateByRule","rules","optional","includes","hasValue","map"],"sourceRoot":"../../src","sources":["useForm.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAqB3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,OAAO,CAAIC,MAAiB,EAAEC,MAAsB,EAAE;EACpE,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACF,MAAM,CAAmB;EAClD,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGP,QAAQ,CAAgB,CAAC,CAAC,CAAC;EAC/D,MAAM,CAACQ,YAAY,EAAEC,eAAe,CAAC,GAAGT,QAAQ,CAACE,MAAM,CAAC;EACxD,MAAM,CAACQ,KAAK,EAAEC,QAAQ,CAAC,GAAGX,QAAQ,CAACE,MAAM,CAAC;EAC1C,MAAM;IAAEU,eAAe;IAAEC,eAAe;IAAEC;EAAW,CAAC,GAAGC,YAAY,CAACZ,MAAM,CAAC;EAE7EJ,SAAS,CAAC,MAAM;IACd,MAAMiB,OAAO,GAAGZ,IAAI,CAACa,MAAM,CAAEC,GAAG,IAAKhB,MAAM,CAACgB,GAAG,CAAC,KAAKV,YAAY,CAACU,GAAG,CAAC,CAAC;IACvE,IAAI,CAACF,OAAO,CAACG,MAAM,EAAE;MACnB;IACF;IAEA,MAAMC,YAAY,GAAG;MAAE,GAAGV;IAAM,CAAC;IACjCM,OAAO,CAACK,OAAO,CAAEH,GAAG,IAAME,YAAY,CAACF,GAAG,CAAC,GAAGhB,MAAM,CAACgB,GAAG,CAAE,CAAC;IAE3DT,eAAe,CAAC;MAAE,GAAGP,MAAM;MAAE,GAAGkB;IAAa,CAAC,CAAC;IAC/CT,QAAQ,CAACS,YAAY,CAAC;EACxB,CAAC,EAAE,CAAClB,MAAM,CAAC,CAAC;;EAEZ;AACF;AACA;AACA;EACE,SAASoB,MAAM,CACbJ,GAAM,EACNK,KAAmB,EACnBC,cAAwB,EACxB;IACAb,QAAQ,CAAEc,CAAC,KAAM;MAAE,GAAGA,CAAC;MAAE,CAACP,GAAG,GAAGK;IAAM,CAAC,CAAC,CAAC;IACzChB,aAAa,CAAEkB,CAAC,KAAM;MACpB,GAAGA,CAAC;MACJ,CAACP,GAAG,GAAGM,cAAc,GAAGZ,eAAe,CAACM,GAAG,EAAEK,KAAK,EAAEb,KAAK,CAAC,GAAGgB;IAC/D,CAAC,CAAC,CAAC;EACL;EAEA,SAASC,QAAQ,CAAoBT,GAAM,EAAE;IAC3CX,aAAa,CAAEkB,CAAC,KAAM;MACpB,GAAGA,CAAC;MACJ,CAACP,GAAG,GAAGN,eAAe,CAACM,GAAG,EAAER,KAAK,CAACQ,GAAG,CAAC,EAAER,KAAK;IAC/C,CAAC,CAAC,CAAC;EACL;;EAEA;AACF;AACA;EACE,SAASkB,YAAY,GAAY;IAC/B,MAAMC,mBAAmB,GAAGhB,eAAe,CAACH,KAAK,CAAC;IAClDH,aAAa,CAACsB,mBAAmB,CAACvB,UAAU,CAAC;IAC7C,OAAOuB,mBAAmB,CAACC,KAAK;EAClC;;EAEA;AACF;EACE,SAASC,WAAW,GAAG;IACrB,OAAO,CAAC3B,IAAI,CAAC4B,IAAI,CAAEd,GAAG,IACpBJ,UAAU,CAACI,GAAG,CAAC,GAAGZ,UAAU,CAACY,GAAG,CAAC,KAAK,KAAK,GAAG,CAACZ,UAAU,CAACY,GAAG,CAAC,CAC/D;EACH;;EAEA;EACA,SAASe,UAAU,GAAG;IACpBtB,QAAQ,CAACT,MAAM,CAAC;EAClB;;EAEA;EACA,SAASgC,kBAAkB,GAAG;IAC5BzB,eAAe,CAACP,MAAM,CAAC;EACzB;;EAEA;EACA,SAASiC,eAAe,GAAG;IACzB5B,aAAa,CAAC,CAAC,CAAC,CAAC;EACnB;;EAEA;EACA,SAAS6B,SAAS,GAAG;IACnBF,kBAAkB,EAAE;IACpBD,UAAU,EAAE;IACZE,eAAe,EAAE;EACnB;EAEA,OAAO;IACLzB,KAAK;IACLJ,UAAU;IACVgB,MAAM;IACNK,QAAQ;IACRC,YAAY;IACZG,WAAW;IACXK,SAAS;IACTH,UAAU;IACVE,eAAe;IACfD;EACF,CAAC;AACH;;AAEA;AACA,OAAO,SAASnB,YAAY,CAAIZ,MAAsB,EAAE;EACtD,SAASkC,cAAc,CAACd,KAA6B,EAAuB;IAC1E,IAAIA,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKG,SAAS,IAAIH,KAAK,KAAK,EAAE,IAAIA,KAAK,GAAG,CAAC,EAAE;MACtE,OAAO,KAAK;IACd;IACA,OAAO,IAAI;EACb;EAEA,SAASe,cAAc,CACrBpB,GAAM,EACNK,KAAW,EACXb,KAAgB,EAChB;IACA;IACA,IAAIP,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEoC,KAAK,IAAIpC,MAAM,CAACoC,KAAK,CAACrB,GAAG,CAAC,EAAE;MAAA;MACtC,4BAAO,iBAAAf,MAAM,CAACoC,KAAK,EAACrB,GAAG,CAAC,sDAAjB,sCAAoBK,KAAK,EAAEb,KAAK,CAAC;IAC1C;IACA;IACA,OAAO,IAAI;EACb;EAEA,SAASI,UAAU,CAACI,GAAY,EAAE;IAAA;IAChC,OAAOf,MAAM,aAANA,MAAM,2CAANA,MAAM,CAAEqC,QAAQ,qDAAhB,iBAAkBC,QAAQ,CAACvB,GAAG,CAAC;EACxC;EAEA,SAASN,eAAe,CACtBM,GAAY,EACZK,KAA6B,EAC7Bb,KAAgB,EAChB;IACA,MAAMgC,QAAQ,GAAGL,cAAc,CAACd,KAAK,CAAC;IACtC,MAAMiB,QAAQ,GAAG1B,UAAU,CAACI,GAAG,CAAC;IAChC,IAAI,CAACwB,QAAQ,EAAE;MACb,OAAO,CAAC,CAACF,QAAQ;IACnB,CAAC,MAAM;MACL,OAAOF,cAAc,CAACpB,GAAG,EAAEK,KAAK,EAAEb,KAAK,CAAC;IAC1C;EACF;EAEA,SAASG,eAAe,CAACH,KAAgB,EAAE;IACzC,MAAMN,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACM,KAAK,CAAC,CAACiC,GAAG,CAAEzB,GAAG,IAAKA,GAAc,CAAC;IAC5D,MAAMZ,UAAyB,GAAG,CAAC,CAAC;IAEpCF,IAAI,CAACiB,OAAO,CAAEH,GAAG,IAAK;MACpB,MAAMK,KAAK,GAAGb,KAAK,CAACQ,GAAG,CAAC;MACxB;MACAZ,UAAU,CAACY,GAAG,CAAC,GAAGN,eAAe,CAACM,GAAG,EAAEK,KAAK,EAAEb,KAAK,CAAC,IAAI,KAAK;IAC/D,CAAC,CAAC;IAEF,OAAO;MACLoB,KAAK,EAAE,CAAC1B,IAAI,CAAC4B,IAAI,CAAEd,GAAG,IAAK,CAACZ,UAAU,CAACY,GAAG,CAAC,CAAC;MAC5CZ;IACF,CAAC;EACH;EAEA,OAAO;IACL+B,cAAc;IACdC,cAAc;IACdxB,UAAU;IACVF,eAAe;IACfC;EACF,CAAC;AACH"}
+{"version":3,"names":["useEffect","useState","useForm","values","config","keys","Object","validation","setValidation","initialState","setInitialState","state","setState","fieldValidation","stateValidation","isOptional","useFormUtils","changed","filter","key","length","updatedState","forEach","update","value","shouldValidate","s","undefined","validate","validateForm","formValidationState","valid","isFormValid","some","resetState","resetInitialValues","resetValidation","clearForm","doesValueExist","isNaN","Date","valueOf","optional","includes","validateByRule","rules","hasValue","map"],"sourceRoot":"../../src","sources":["useForm.ts"],"mappings":"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"}

package/lib/typescript/lib/module/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../module/hooks/useForm.js"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AACH;;;;;;;;;;;EA+FC;AAED,0EAA0E;AAC1E;;;;;;;;;EAiDC"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../module/hooks/useForm.js"],"names":[],"mappings":"AACA;;;;;;;;GAQG;AACH;;;;;;;;;;;EA+FC;AAED,0EAA0E;AAC1E;;;;;;;;;EAgEC"}

package/lib/typescript/src/hooks/useForm.d.ts

@@ -1,16 +1,16 @@
-declare type Validation<T> = {
+export declare type Validation<T> = {
     [K in keyof Partial<T>]?: boolean;
 };
 declare type Rules<T> = {
-    [K in keyof T]?: (value: T[K], state: T) => boolean | undefined;
+    [K in keyof T]?: (value: T[K], state: T, optional: boolean) => boolean | undefined;
 };
-declare type Values<T> = {
+export declare type Values<T> = {
     [K in keyof T]: T[K];
 };
 export declare type FormConfig<R> = {
     /** List of optional properties. Optional properties will be marked as valid if left empty. */
     optional?: Array<keyof R>;
-    /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (Boolean(value)) */
+    /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (optional || Boolean(value)). Note: For complex value types (objects, arrays, dates etc) it is best to use a custom validation rule. */
     rules?: Rules<R>;
     /** Will compare key/value pairs instead of just top level JSON.stringify on complex objects/arrays */
     deepCompare?: boolean;
@@ -39,10 +39,10 @@ export declare function useForm<T>(values: Values<T>, config?: FormConfig<T>): {
 };
 /** Helper hook to validate form state outside of the scope of useForm. */
 export declare function useFormUtils<T>(config?: FormConfig<T>): {
-    doesValueExist: (value: T[keyof T] | undefined) => value is T[keyof T];
+    doesValueExist: (value: T[keyof T]) => value is Exclude<T[keyof T], null | undefined>;
     validateByRule: <K extends keyof T>(key: K, value: T[K], state: Values<T>) => boolean | undefined;
-    isOptional: (key: keyof T) => boolean | undefined;
-    fieldValidation: (key: keyof T, value: T[keyof T] | undefined, state: Values<T>) => boolean | undefined;
+    isOptional: (key: keyof T) => boolean;
+    fieldValidation: (key: keyof T, value: T[keyof T], state: Values<T>) => boolean | undefined;
     stateValidation: (state: Values<T>) => {
         valid: boolean;
         validation: Validation<T>;

package/lib/typescript/src/hooks/useForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAEA,aAAK,UAAU,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAC3D,aAAK,KAAK,CAAC,CAAC,IAAI;KACb,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,OAAO,GAAG,SAAS;CAChE,CAAC;AAEF,aAAK,MAAM,CAAC,CAAC,IAAI;KACd,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,IAAI;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1B,uNAAuN;IACvN,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;;;8EA2B/C,OAAO;;wBAmBD,OAAO;;;;;;EAgDjC;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;4BACrB,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,SAAS;oEAU5C,OAAO,CAAC,CAAC;sBAUO,MAAM,CAAC;2BAKzB,MAAM,CAAC,SACL,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,SAAS,SACtB,OAAO,CAAC,CAAC;6BAWc,OAAO,CAAC,CAAC;;;;EAuB1C"}
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAClE,aAAK,KAAK,CAAC,CAAC,IAAI;KACb,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CACf,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EACX,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,OAAO,KACd,OAAO,GAAG,SAAS;CACzB,CAAC;AAEF,oBAAY,MAAM,CAAC,CAAC,IAAI;KACrB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,IAAI;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1B,2UAA2U;IAC3U,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;;;8EA2B/C,OAAO;;wBAmBD,OAAO;;;;;;EAgDjC;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;4BAE3C,CAAC,CAAC,MAAM,CAAC,CAAC;oEA6BV,OAAO,CAAC,CAAC;sBARO,MAAM,CAAC;2BAkBF,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,OAAO,CAAC,CAAC;6BAY1C,OAAO,CAAC,CAAC;;;;EAuB1C"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@prototyp/skeletor",
   "description": "React-Native UI and functional toolkit",
   "author": "Luka Buljan <luka@prototyp.digital>",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "types": "lib/typescript/src/index.d.ts",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/hooks/useForm.ts

@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
 
-type Validation<T> = { [K in keyof Partial<T>]?: boolean };
+export type Validation<T> = { [K in keyof Partial<T>]?: boolean };
 type Rules<T> = {
-  [K in keyof T]?: (value: T[K], state: T) => boolean | undefined;
+  [K in keyof T]?: (
+    value: T[K],
+    state: T,
+    optional: boolean
+  ) => boolean | undefined;
 };
 
-type Values<T> = {
+export type Values<T> = {
   [K in keyof T]: T[K];
 };
 
 export type FormConfig<R> = {
   /** List of optional properties. Optional properties will be marked as valid if left empty. */
   optional?: Array<keyof R>;
-  /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (Boolean(value)) */
+  /** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (optional || Boolean(value)). Note: For complex value types (objects, arrays, dates etc) it is best to use a custom validation rule. */
   rules?: Rules<R>;
   /** Will compare key/value pairs instead of just top level JSON.stringify on complex objects/arrays */
   deepCompare?: boolean;
@@ -55,7 +59,7 @@ export function useForm<T>(values: Values<T>, config?: FormConfig<T>) {
   function update<K extends keyof T>(
     key: K,
     value: Values<T>[K],
-    shouldValidate?: boolean,
+    shouldValidate?: boolean
   ) {
     setState((s) => ({ ...s, [key]: value }));
     setValidation((s) => ({
@@ -84,7 +88,7 @@ export function useForm<T>(values: Values<T>, config?: FormConfig<T>) {
    * Only use when validating fields separately, has no value when valiating on form submit. */
   function isFormValid() {
     return !keys.some((key) =>
-      isOptional(key) ? validation[key] === false : !validation[key],
+      isOptional(key) ? validation[key] === false : !validation[key]
     );
   }
 
@@ -126,42 +130,56 @@ export function useForm<T>(values: Values<T>, config?: FormConfig<T>) {
 
 /** Helper hook to validate form state outside of the scope of useForm. */
 export function useFormUtils<T>(config?: FormConfig<T>) {
-  function doesValueExist(value: T[keyof T] | undefined): value is T[keyof T] {
-    if (value === null || value === undefined || value === "" || value < 0) {
+  function doesValueExist(
+    value: T[keyof T]
+  ): value is Exclude<T[keyof T], null | undefined> {
+    if (value === undefined || value === null) {
       return false;
     }
-    return true;
-  }
 
-  function validateByRule<K extends keyof T>(
-    key: K,
-    value: T[K],
-    state: Values<T>,
-  ) {
-    // If rule exists, validate with rule
-    if (config?.rules && config.rules[key]) {
-      return config.rules[key]?.(value, state);
+    if (typeof value === "string") {
+      return value !== "";
     }
-    // else return true because we know the value exists already.
+
+    if (typeof value === "number") {
+      return value >= 0 || value < 0 || !isNaN(value);
+    }
+
+    if (value instanceof Date) {
+      return !isNaN(value.valueOf());
+    }
+
     return true;
   }
 
   function isOptional(key: keyof T) {
-    return config?.optional?.includes(key);
+    return config?.optional?.includes(key) || false;
   }
 
-  function fieldValidation(
-    key: keyof T,
-    value: T[keyof T] | undefined,
-    state: Values<T>,
+  /** Validate by custom validation rule. If the rule does not exist, returns undefined. */
+  function validateByRule<K extends keyof T>(
+    key: K,
+    value: T[K],
+    state: Values<T>
   ) {
+    return config?.rules?.[key]?.(value, state, isOptional(key));
+  }
+
+  /** Handles validation for a specific form field.
+   * Order of priority:
+   * 1. If there is a custom validation rule, always use that to preserve all possible type values
+   * 2. If there is no value (is a falsy value), check if the field is optional
+   * 3. Fallback to simple truthy value check if all other checks are not triggered. */
+  function fieldValidation(key: keyof T, value: T[keyof T], state: Values<T>) {
     const hasValue = doesValueExist(value);
     const optional = isOptional(key);
-    if (!hasValue) {
-      return !!optional;
-    } else {
-      return validateByRule(key, value, state);
-    }
+
+    // If form has custom validation rule, always trigger only that.
+    if (!!config?.rules?.[key]) return validateByRule(key, value, state);
+    // If value does not exist (is null, undefined or other falsy value), check if field is optional.
+    if (!hasValue) return !!optional;
+    // Fallback, simple check if value exists
+    return hasValue;
   }
 
   function stateValidation(state: Values<T>) {