form validation

KelvinTegelaar · Sep 26, 2024 · abc54a9 · abc54a9
1 parent ccfa163
commit abc54a9
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 30 deletions.
diff --git a/src/components/CippComponents/CippFormComponent.jsx b/src/components/CippComponents/CippFormComponent.jsx
@@ -23,38 +23,78 @@ export const CippFormComponent = (props) => {
       );
     case "switch":
       return (
-        <Controller
-          name={name}
-          control={formControl.control}
-          render={({ field }) => (
-            <Switch
-              checked={field.value}
-              {...other}
-              {...formControl.register(name, { ...validators })}
+        <>
+          <div>
+            <Controller
+              name={name}
+              control={formControl.control}
+              render={({ field }) => (
+                <Switch
+                  checked={field.value}
+                  {...other}
+                  {...formControl.register(name, { ...validators })}
+                />
+              )}
             />
-          )}
-        />
+          </div>
+          <Typography variant="subtitle3" color={"error"}>
+            {name.includes(".")
+              ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
+              : errors[name]?.message}
+          </Typography>
+        </>
       );
     case "checkbox":
-      return <Checkbox {...other} {...formControl.register(name, { ...validators })} />;
+      return (
+        <>
+          <div>
+            <Checkbox {...other} {...formControl.register(name, { ...validators })} />
+          </div>
+          <Typography variant="subtitle3" color={"error"}>
+            {name.includes(".")
+              ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
+              : errors[name]?.message}
+          </Typography>
+        </>
+      );
     case "radio":
-      return <Radio {...other} {...formControl.register(name, { ...validators })} />;
+      return (
+        <>
+          <div>
+            <Radio {...other} {...formControl.register(name, { ...validators })} />
+          </div>
+          <Typography variant="subtitle3" color={"error"}>
+            {name.includes(".")
+              ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
+              : errors[name]?.message}
+          </Typography>
+        </>
+      );
     case "autoComplete":
       //for autoComplete we need to use Controller from react-hook-form as it does not pass the synthetic event
       return (
-        <Controller
-          name={name}
-          control={formControl.control}
-          render={({ field }) => (
-            <CippAutoComplete
-              {...other}
-              defaultValue={field.value}
-              onChange={(value) => {
-                field.onChange(value);
-              }}
+        <>
+          <div>
+            <Controller
+              name={name}
+              control={formControl.control}
+              render={({ field }) => (
+                <CippAutoComplete
+                  {...other}
+                  defaultValue={field.value}
+                  onChange={(value) => {
+                    field.onChange(value);
+                  }}
+                />
+              )}
             />
-          )}
-        />
+          </div>
+          <Typography variant="subtitle3" color={"error"}>
+            {name.includes(".")
+              ? errors[name.split(".")[0]]?.[name.split(".")[1]]?.message
+              : errors[name]?.message}
+          </Typography>
+        </>
       );
   }
 };

diff --git a/src/pages/cipp/user-settings/index.js b/src/pages/cipp/user-settings/index.js
@@ -76,7 +76,9 @@ const Page = () => {
                               name="TenantListSelector"
                               formControl={formcontrol}
                               multiple={false}
-                              validators={{ required: "This field is required" }}
+                              validators={{
+                                required: { value: true, message: "This field is required" },
+                              }}
                               options={[
                                 { value: "full", label: "Show the full page" },
                                 { value: "compressed", label: "Show the compressed page" },
@@ -95,6 +97,9 @@ const Page = () => {
                               name="currentTheme"
                               formControl={formcontrol}
                               multiple={false}
+                              validators={{
+                                required: { value: true, message: "This field is required" },
+                              }}
                               options={[
                                 { value: "light", label: "Light" },
                                 { value: "dark", label: "Dark" },
@@ -113,7 +118,6 @@ const Page = () => {
                               name="userAttributes"
                               formControl={formcontrol}
                               multiple={true}
-                              validators={{ required: "This field is required" }}
                             />
                           ),
                         },
@@ -129,6 +133,9 @@ const Page = () => {
                               formControl={formcontrol}
                               multiple={false}
                               options={languageListOptions}
+                              validators={{
+                                required: { value: true, message: "This field is required" },
+                              }}
                             />
                           ),
                         },
@@ -144,22 +151,22 @@ const Page = () => {
                               formControl={formcontrol}
                               multiple={false}
                               options={pageSizes}
+                              validators={{
+                                required: { value: true, message: "This field is required" },
+                              }}
                             />
                           ),
                         },
                         {
                           label: "Menu Favourites",
                           value: (
                             <CippFormComponent
-                              type="textField"
+                              type="autoComplete"
                               sx={{ width: "250px" }}
                               disableClearable={true}
                               name="userSettingsDefaults.favourites"
                               formControl={formcontrol}
                               multiple={false}
-                              validators={{
-                                required: { value: true, message: "This field is required" },
-                              }}
                               options={[
                                 { value: "25", label: "25" },
                                 { value: "50", label: "50" },