frontend/src/shared/components/modals/CheckoutModal.tsx

@@ -30,6 +30,9 @@ export const CheckoutBookModal = ({
 
   const onSubmit = useCallback(
     async (data: Partial<BookCheckoutForm>) => {
+      if (!formState.isValid) {
+        return;
+      }
       if (!data.checkoutBy) {
         setError("checkoutBy", {
           message: `please enter ${
@@ -61,7 +64,7 @@ export const CheckoutBookModal = ({
         setFailed(await res.text());
       }
     },
-    [uuid, onClose, setError, isChechout]
+    [formState.isValid, isChechout, uuid, setError, onClose]
   );
 
   return (
@@ -116,6 +119,12 @@ export const CheckoutBookModal = ({
                         "'null' is not a valid nickname"
                       );
                     },
+                    notUndefinedString: (value) => {
+                      return (
+                        value?.toLocaleLowerCase() !== "undefined" ||
+                        "'undefined' is not a valid nickname"
+                      );
+                    },
                   },
                 })}
                 isInvalid={!!formState.errors.checkoutBy}
@@ -184,6 +193,7 @@ export const CheckoutBookModal = ({
                 marginLeft: "auto",
                 marginRight: "10px",
               }}
+              disabled={!formState.isValid}
               onClick={() => onSubmit(values)}
             >
               {`${isChechout ? "Checkout" : "Return"} book`}