fix: validate multi-select field

frontend/src/components/forms/MultiselectInputComponent.vue

@@ -56,17 +56,13 @@ const validateInput = (newValue: any) => {
       if (message) return true;
       return false;
     };
-    const validate = (value: string) =>
+    const validate = (value: string[]) =>
       props.validations
         .map((validation) => validation(value))
         .filter(hasError)
         .shift() ?? props.errorMessage;
 
-    error.value =
-      items.value
-        .map((item: string) => validate(item))
-        .filter(hasError)
-        .shift() ?? props.errorMessage;
+    error.value = validate(items.value);
   }
 };
 
@@ -113,7 +109,6 @@ watch(
   () => (error.value = props.errorMessage)
 );
 
-validateInput(selectedValue.value);
 revalidateBus.on(() => validateInput(selectedValue.value));
 </script>
 

frontend/src/components/grouping/ContactGroupComponent.vue

@@ -110,7 +110,7 @@ const updateContactType = (value: CodeNameType | undefined) => {
     :model-value="addressList"
     :selectedValues="selectedValue.locationNames?.map((location:CodeDescrType) => location?.text)"
     :validations="[
-      ...getValidations('location.contacts.*.locationNames.*.text'),
+      ...getValidations('location.contacts.*.locationNames'),
       submissionValidation(`location.contacts[${id}].locationNames`)
     ]"
     @update:selected-value="

frontend/src/helpers/validators/BCeIDFormValidations.ts

@@ -12,6 +12,7 @@ import {
   isNoSpecialCharacters,
   isNot,
   formFieldValidations,
+  isNotEmptyArray,
 } from "@/helpers/validators/GlobalValidators";
 
 
@@ -70,8 +71,8 @@ formFieldValidations[
 ];
 
 // Step 3: Contacts
-formFieldValidations["location.contacts.*.locationNames.*.text"] = [
-  isNotEmpty("You must select at least one location"),
+formFieldValidations["location.contacts.*.locationNames"] = [
+  isNotEmptyArray("You must select at least one location"),
 ];
 formFieldValidations["location.contacts.*.contactType.text"] = [
   isNotEmpty("You must select at least one contact type"),

frontend/src/helpers/validators/GlobalValidators.ts

@@ -35,6 +35,23 @@ export const isNotEmpty =
     return message;
   };
 
+/**
+ * Checks if the array is not empty
+ * @param array - The array to check
+ * @returns An empty string if the array is not empty, error message otherwise
+ * @example
+ * isNotEmptyArray([]) // false
+ * isNotEmptyArray('a') // true
+ * isNotEmptyArray([' ']) // true
+ * isNotEmptyArray([undefined]) // true
+ */
+export const isNotEmptyArray =
+  (message: string = "This field is required") =>
+  (array: any[]): string => {
+    if (array && array.length > 0) return "";
+    return message;
+  };
+
 /**
  * Checks if the value is an email
  * @param value - The value to check

frontend/tests/unittests/components/forms/MultiselectInputComponent.spec.ts

@@ -5,12 +5,13 @@ import MultiselectInputComponent from '@/components/forms/MultiselectInputCompon
 
 describe('MultiselectInputComponent', () => {
   const validations = [
-    (value: any) =>
-      value === 'A' || value === 'Value A' ? 'A is not supported' : ''
+    (value: any[]) =>
+      value.includes('A') || value.includes('Value A') ? 'A is not supported' : ''
   ]
 
-  const eventContent = (value:string) => {return { data:  value }}
-
+  const eventContent = (value: string) => {
+    return { data: value }
+  }
 
   it('should render', () => {
     const wrapper = mount(MultiselectInputComponent, {
@@ -128,7 +129,7 @@ describe('MultiselectInputComponent', () => {
 
     const dropdown = wrapper.find('cds-multi-select')
 
-    await dropdown.trigger('cds-multi-select-selected',eventContent('Value A'))
+    await dropdown.trigger('cds-multi-select-selected', eventContent('Value A'))
 
     expect(wrapper.emitted('update:modelValue')).toBeTruthy()
     expect(wrapper.emitted('update:modelValue')![0][0]).toStrictEqual(['Value A'])
@@ -142,7 +143,7 @@ describe('MultiselectInputComponent', () => {
     ])
 
     expect(wrapper.emitted('error')).toBeTruthy()
-    expect(wrapper.emitted('error')![1][0]).toBe('A is not supported')
+    expect(wrapper.emitted('error')![0][0]).toBe('A is not supported')
   })
 
   it('should validate and emit no error if required', async () => {