Fix required validator (#28)

ilbrando · Dec 26, 2024 · 06a9797 · 06a9797
1 parent fb09db4
commit 06a9797
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/common/changes/@ilbrando/simple-form/fix-required-validator_2024-12-25-18-06.json b/common/changes/@ilbrando/simple-form/fix-required-validator_2024-12-25-18-06.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ilbrando/simple-form",
+      "comment": "Identification of a required validator has changed to a custom property on the function",
+      "type": "major"
+    }
+  ],
+  "packageName": "@ilbrando/simple-form"
+}
diff --git a/examples/storybook/src/stories/joy/form-fields.stories.tsx b/examples/storybook/src/stories/joy/form-fields.stories.tsx
@@ -100,7 +100,7 @@ const FormStory = (props: FormStoryProps) => {
     simpleForm: {
       reserveSpaceForValidationMessage
     },
-    // If you think form component take up too much space then reserveSpaceForValidationMessage you can decrease
+    // If you think form component takes up too much space then with reserveSpaceForValidationMessage you can decrease
     // the margin between the helper text (error message) and the input.
     components: reserveSpaceForValidationMessage
       ? {
@@ -114,18 +114,19 @@ const FormStory = (props: FormStoryProps) => {
         }
       : undefined
   });
+
   return (
     <ThemeProvider theme={theme}>
       <Box display="grid" gridTemplateColumns="400px auto" gap={2}>
         <Box gridColumn="1" display="flex" flexDirection="column" gap={reserveSpaceForValidationMessage ? 0 : 1}>
-          <FormText formManager={fm} fieldName="textField" label="Text Field" disabled={isDisabled} readOnly={isReadOnly} size={size} />
-          <FormNumber formManager={fm} fieldName="numberField" label="Number Field" disabled={isDisabled} readOnly={isReadOnly} size={size} />
-          <FormAutocomplete formManager={fm} fieldName="autocompleteField" label="Autocomplete Field" options={autocompleteOptions} disabled={isDisabled} size={size} />
-          <FormAutocompleteMultiple formManager={fm} fieldName="autocompleteMultipleField" label="Autocomplete Field (multiple)" options={autocompleteOptions} disabled={isDisabled} size={size} />
-          <FormRadioGroup formManager={fm} fieldName="radiogroupField" label="Radiogroup Field" options={radioGroupOptions} disabled={isDisabled} size={size} />
+          <FormText formManager={fm} fieldName="textField" label="Text Field" readOnly={isReadOnly} size={size} />
+          <FormNumber formManager={fm} fieldName="numberField" label="Number Field" readOnly={isReadOnly} size={size} />
+          <FormAutocomplete formManager={fm} fieldName="autocompleteField" label="Autocomplete Field" options={autocompleteOptions} size={size} />
+          <FormAutocompleteMultiple formManager={fm} fieldName="autocompleteMultipleField" label="Autocomplete Field (multiple)" options={autocompleteOptions} size={size} />
+          <FormRadioGroup formManager={fm} fieldName="radiogroupField" label="Radiogroup Field" options={radioGroupOptions} size={size} />
           <FormRangeSlider formManager={fm} fieldName="rangeField" label="Range Slider" min={1} max={10} />
-          <FormSwitch formManager={fm} fieldName="switchField" label="Switch Field" disabled={isDisabled} size={size} />
-          <FormCheckbox formManager={fm} fieldName="checkboxField" label="Checkbox Field" disabled={isDisabled} size={size} />
+          <FormSwitch formManager={fm} fieldName="switchField" label="Switch Field" size={size} />
+          <FormCheckbox formManager={fm} fieldName="checkboxField" label="Checkbox Field" size={size} />
         </Box>
         <Box gridColumn="2">
           <Button onClick={handleSubmit} size={size}>

diff --git a/packages/simple-form/src/form-validation/validation-rules/common.ts b/packages/simple-form/src/form-validation/validation-rules/common.ts
@@ -4,16 +4,20 @@ import { useLocalization } from "src/localization";
 
 import { Validator } from "../validation-types";
 
+export const isRequiredPropertyName = "isRequired";
+
 export const useCommonValidationRules = () => {
   const { texts } = useLocalization();
 
   const alwaysValid: Validator<unknown> = (_: unknown) => undefined;
 
-  const required = <T>(errorMessage?: string): Validator<T> =>
-    // Must be written like this because the name of the function returned must start with "required".
-    function required(value) {
+  const required = <T>(errorMessage?: string): Validator<T> => {
+    const fn = value => {
       return hasValue(value) ? undefined : errorMessage ?? texts.required;
     };
+    Object.defineProperty(fn, isRequiredPropertyName, { value: true, writable: false });
+    return fn;
+  };
 
   return {
     alwaysValid,

diff --git a/packages/simple-form/src/form-validation/validation-utils.ts b/packages/simple-form/src/form-validation/validation-utils.ts
@@ -1,5 +1,6 @@
 import { hasValue } from "@ilbrando/utils";
 
+import { isRequiredPropertyName } from "./validation-rules";
 import { Validator } from "./validation-types";
 
-export const hasRequiredValidator = <T>(validators: Validator<T>[] | undefined) => hasValue(validators?.find(x => x.name.startsWith("required")));
+export const hasRequiredValidator = <T>(validators: Validator<T>[] | undefined) => hasValue(validators?.find(x => x[isRequiredPropertyName] ?? false));