Implement min choices validation

vocdoni · Nov 6, 2024 · e3d7ca9 · e3d7ca9
1 parent 97fa626
commit e3d7ca9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx
@@ -78,8 +78,9 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
   }
 
   const choices = [...question.choices]
-  // Put can abstain on a separated variable to avoid typing errors on validation function
+  // Put can abstain and minChoices on a separated variable to avoid typing errors on validation function
   const canAbstain = election.resultsType.properties.canAbstain
+  const minChoices = election.resultsType?.properties?.numChoices?.min
 
   return (
     <Stack sx={styles.stack}>
@@ -91,6 +92,15 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
             // allow a single selection if is an abstain
             if (canAbstain && v && v.length < election.voteType.maxCount!) return true
 
+            // If there are min choices, validate that the user has selected at least that amount
+            if (minChoices) {
+              if (v && v.length >= minChoices && v.length <= election.voteType.maxCount) {
+                return true
+              }
+              return localize('validation.min_choices_count', { count: minChoices })
+            }
+
+            // If no minChoices configured, selected choices must be the maxCount
             return (
               (v && v.length === election.voteType.maxCount) ||
               localize('validation.choices_count', { count: election.voteType.maxCount })
@@ -123,6 +133,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => {
                         if (maxSelected) return
                         onChange([...values, e.target.value])
                       }
+
                       trigger(index) // Manually trigger validation
                     }}
                   >

diff --git a/packages/chakra-components/src/i18n/locales.ts b/packages/chakra-components/src/i18n/locales.ts
@@ -92,6 +92,7 @@ export const locales = {
     required: 'This field is required',
     min_length: 'This field must be at least {{ min }} characters long',
     choices_count: 'Select {{ count }} choices',
+    min_choices_count: 'Select minimum of {{ count }} choices',
     at_least_one: 'You must select at least one option',
   },
   // questions and vote button