Merge pull request #472 from Plant-for-the-Planet-org/feature/restric…

…t-gift-recipient-name-length Add validation for recipient name length in GiftForm
Plant-for-the-Planet-org · Dec 3, 2024 · 8546ebb · 8546ebb
2 parents b7cb75c + c379166
commit 8546ebb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -7,6 +7,7 @@
   "tree_other": "trees",
   "recipientName": "Recipient Name",
   "recipientNameRequired": "Recipient Name is required",
+  "recipientNameTooLong": "Recipient Name must be 35 characters or less",
   "email": "Email",
   "recipientEmail": "Recipient Email",
   "emailRequired": "Email is required",

diff --git a/src/Donations/Micros/GiftForm.tsx b/src/Donations/Micros/GiftForm.tsx
@@ -91,7 +91,16 @@ export default function GiftForm(): ReactElement {
               <Controller
                 name="recipientName"
                 control={control}
-                rules={{ required: true }}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("recipientNameRequired"),
+                  },
+                  maxLength: {
+                    value: 35,
+                    message: t("recipientNameTooLong"),
+                  },
+                }}
                 render={({ field: { onChange, value } }) => (
                   <MaterialTextField
                     onChange={onChange}
@@ -109,9 +118,9 @@ export default function GiftForm(): ReactElement {
                   />
                 )}
               />
-              {errors.recipientName && (
+              {errors.recipientName !== undefined && (
                 <div className={"form-errors"}>
-                  {t("recipientNameRequired")}
+                  {errors.recipientName.message}
                 </div>
               )}
             </div>