Add validation logic to check if at least one field is filled

openmrs · Aug 5, 2024 · 29112fe · 29112fe
1 parent 0dd13d3
commit 29112fe
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/src/results/result-form-field.component.tsx b/src/results/result-form-field.component.tsx
@@ -9,8 +9,6 @@ import { ZodSchema, z } from "zod";
 const isNumeric = (concept: ConceptReference): boolean =>
   concept.datatype.display === "Numeric";
 
-const defaultNumericValue = () => 0;
-
 const createResultFormFieldSchema = (
   concepts: ConceptReference[],
   t: TFunction
@@ -20,14 +18,27 @@ const createResultFormFieldSchema = (
       ? z.coerce
           .number()
           .min(0, { message: t("enterValidNumber", "Enter a valid number") })
+          .optional()
       : z
           .string()
-          .min(1, { message: t("fieldRequired", "This field is required") });
+          .min(1, { message: t("fieldRequired", "This field is required") })
+          .optional();
 
     return { ...acc, [concept.uuid]: fieldValidation };
   }, {} as Record<string, z.ZodString | z.ZodNumber>);
 
-  return z.object(fields);
+  const schema = z.object(fields).refine(
+    (data) => {
+      return Object.values(data).some(
+        (value) => value !== undefined && value !== null && value !== ""
+      );
+    },
+    {
+      message: t("atLeastOneField", "At least one field must be filled out"),
+    }
+  );
+
+  return schema;
 };
 
 interface ResultFormFieldProps {
@@ -74,7 +85,6 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
         <Controller
           control={control}
           name={concept.uuid}
-          rules={{ required: true }}
           render={({ field }) => (
             <TextInput
               key={concept.uuid}
@@ -99,7 +109,6 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
         <Controller
           name={concept.uuid}
           control={control}
-          rules={{ required: true }}
           render={({ field }) => (
             <Select
               key={concept.uuid}
@@ -135,7 +144,6 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
                 key={member.uuid}
                 control={control}
                 name={member.uuid}
-                rules={{ required: true }}
                 render={({ field }) => (
                   <TextInput
                     className={styles.textInput}
@@ -164,7 +172,6 @@ const ResultFormField: React.FC<ResultFormFieldProps> = ({
                 key={member.uuid}
                 name={member.uuid}
                 control={control}
-                rules={{ required: true }}
                 render={({ field }) => (
                   <Select
                     className={styles.textInput}

diff --git a/src/results/result-form.component.tsx b/src/results/result-form.component.tsx
@@ -74,6 +74,15 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
 
     const submissionDatetime = new Date().toISOString();
 
+    const isAtLeastOneFieldFilled = concept.setMembers.some((member) => {
+      return getValues()[member.uuid];
+    });
+
+    if (!isAtLeastOneFieldFilled) {
+      setShowErrorNotification(true);
+      return;
+    }
+
     if (concept.set && concept.setMembers.length > 0) {
       let groupMembers = [];
       concept.setMembers.forEach((member) => {
@@ -267,7 +276,10 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
           <InlineNotification
             lowContrast
             title={t("error", "Error")}
-            subtitle={t("pleaseAllFields", "Please fill all fields") + "."}
+            subtitle={
+              t("pleaseFillAtLeastOneField", "Please fill at least one field") +
+              "."
+            }
             onClose={() => setShowErrorNotification(false)}
           />
         </Column>
@@ -306,3 +318,4 @@ const ResultForm: React.FC<ResultFormProps> = ({ order, patientUuid }) => {
 };
 
 export default ResultForm;
+``;