Add more validation for bulk adding payments

src/components/CreateProject/BulkAddPaymentModal.tsx

@@ -73,6 +73,7 @@ const BulkAddPaymentModal: React.FC<Props> = ({
 
   const { register, reset, trigger, formState, watch, control } =
     useForm<BulkAddPaymentForm>({
+      mode: "onTouched",
       defaultValues: { dateType: "monthly", dateReference: dayjs() },
     });
 
@@ -87,7 +88,12 @@ const BulkAddPaymentModal: React.FC<Props> = ({
       description,
     } = formValues;
 
-    if (numberOfEntries > 0 && amountToDivide && description) {
+    if (
+      Number.isInteger(numberOfEntries) &&
+      numberOfEntries > 0 &&
+      amountToDivide &&
+      description
+    ) {
       const dividedAmount = amountToDivide / numberOfEntries;
       return Array(numberOfEntries)
         .fill(undefined)
@@ -157,6 +163,17 @@ const BulkAddPaymentModal: React.FC<Props> = ({
           {...register("numberOfEntries", {
             valueAsNumber: true,
             required: t("Required"),
+            validate: (value) => {
+              if (!value) {
+                return t("Required");
+              } else if (value < 0) {
+                return t("Number must be positive");
+              } else if (!Number.isInteger(value)) {
+                return t("Number must be an integer");
+              } else {
+                return true;
+              }
+            },
           })}
           error={Boolean(formState.errors.numberOfEntries)}
           helperText={formState.errors.numberOfEntries?.message}