diff --git a/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx b/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx
index e3169437..f681a6ac 100644
--- a/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx
+++ b/media_commons_booking_app/src/client/routes/booking/components/FormInput.tsx
@@ -77,7 +77,6 @@ const FormInput = ({ handleParentSubmit }) => {
 
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     const dumpMediaServices = data.mediaServices || [];
-    //@ts-ignore
     data.mediaServices = Array.isArray(dumpMediaServices)
       ? dumpMediaServices.join(', ')
       : dumpMediaServices;
@@ -93,15 +92,7 @@ const FormInput = ({ handleParentSubmit }) => {
   };
 
   return (
-    <form
-      className="py-10 items-center"
-      //onSubmit={(e) => {
-      //  e.preventDefault();
-      //  const values = Object.values(data);
-      //  handleParentSubmit(values, data);
-      //}}
-      onSubmit={handleSubmit(onSubmit)}
-    >
+    <form className="py-10 items-center" onSubmit={handleSubmit(onSubmit)}>
       {userEmail == null && (
         <div className="mb-6">
           <label
@@ -586,7 +577,7 @@ const FormInput = ({ handleParentSubmit }) => {
             ))}
         </div>
       </div>
-      {watch('mediaServices') !== undefined && (
+      {watch('mediaServices').length > 0 && (
         <div className="mb-6">
           <label
             htmlFor="mediaServicesDetails"
@@ -615,12 +606,17 @@ const FormInput = ({ handleParentSubmit }) => {
             <br />
           </label>
           <p className="text-xs"></p>
+          {errors.mediaServicesDetails && (
+            <ErrorMessage errors={errors.mediaServicesDetails.message} />
+          )}
           <input
             type="text"
             id="mediaServicesDetails"
             className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-[600px] p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
             placeholder=""
-            {...register('mediaServicesDetails')}
+            {...register('mediaServicesDetails', {
+              required: watch('mediaServices').length > 0,
+            })}
           />
         </div>
       )}
diff --git a/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx b/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
index f45ff3a2..77b0d80b 100644
--- a/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
+++ b/media_commons_booking_app/src/client/routes/booking/hooks/useSubmitBooking.tsx
@@ -117,13 +117,13 @@ export default function useSubmitBooking(): [
       formatDate(new Date()),
     ]);
 
-    const isAutoApproval = (selectedRoomIds, data) => {
+    const isAutoApproval = (selectedRoomIds: string[], data: Booking) => {
       // If the selected rooms are all instant approval rooms and the user does not need catering, and hire security, and room setup, then it is auto-approval.
       return (
         selectedRoomIds.every((r) => INSTANT_APPROVAL_ROOMS.includes(r)) &&
         data['catering'] === 'no' &&
         data['hireSecurity'] === 'no' &&
-        data['mediaServices'] === '' &&
+        data['mediaServices'].length === 0 &&
         data['roomSetup'] === 'no'
       );
     };