LF-4619 Added validation to throw error when animal type or breed nam…

…e exceeds 255 characters
LiteFarmOrg · Feb 3, 2025 · 901fcd7 · 901fcd7
1 parent a3b7c6d
commit 901fcd7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/packages/webapp/src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx b/packages/webapp/src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx
@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { RefObject } from 'react';
 import { GroupBase, SelectInstance, OptionsOrGroups } from 'react-select';
 import { Error } from '../../Typography';
+import { hookFormSelectOptionMaxLength } from '../../Form/hookformValidationUtils';
 
 export type Option = {
   label: string;
@@ -49,6 +50,7 @@ export function AnimalTypeSelect<T extends FieldValues>({
         control={control}
         rules={{
           required: { value: true, message: t('common:REQUIRED') },
+          validate: hookFormSelectOptionMaxLength,
         }}
         render={({ field: { onChange, value } }) => (
           <CreatableSelect
@@ -94,6 +96,9 @@ export function AnimalBreedSelect<T extends FieldValues>({
       <Controller
         name={name}
         control={control}
+        rules={{
+          validate: hookFormSelectOptionMaxLength,
+        }}
         render={({ field: { onChange, value } }) => (
           <CreatableSelect
             ref={breedSelectRef}

diff --git a/packages/webapp/src/components/Animals/DetailCards/General.tsx b/packages/webapp/src/components/Animals/DetailCards/General.tsx
@@ -201,6 +201,10 @@ const GeneralDetails = ({
         control={control}
         breedOptions={filteredBreeds}
         isTypeSelected={!!watchAnimalType}
+        onBreedChange={(option) => {
+          trigger(`${namePrefix}${DetailsFields.BREED}`);
+        }}
+        error={get(errors, `${namePrefix}${DetailsFields.BREED}`)}
         isDisabled={mode !== 'edit'}
       />
       {sexInputs}

diff --git a/packages/webapp/src/components/Form/hookformValidationUtils.js b/packages/webapp/src/components/Form/hookformValidationUtils.js
@@ -87,3 +87,18 @@ export const hookFormUniquePropertyWithStatusValidation = ({
     return true;
   };
 };
+
+/**
+ * Validates whether the length of the selected option's label exceeds the specified maximum.
+ * Returns an error message if the length is greater than the allowed limit; otherwise, returns true.
+ *
+ * @param {string} Option - The option whose label length is being validated.
+ * @param {number} length - The maximum allowed length for the label.
+ * @returns {string | boolean} A validation function that checks the label's length
+ * and returns either an error message or `true` if the validation passes.
+ */
+export const hookFormSelectOptionMaxLength = (selectedOption, length = 255) => {
+  return (
+    selectedOption?.label.length <= length || i18n.t('common:CHAR_LIMIT_ERROR', { value: length })
+  );
+};