diff --git a/app/features/calendar/routes/calendar.new.tsx b/app/features/calendar/routes/calendar.new.tsx
index 88b5fdd13..23a2e974c 100644
--- a/app/features/calendar/routes/calendar.new.tsx
+++ b/app/features/calendar/routes/calendar.new.tsx
@@ -181,6 +181,12 @@ function EventForm() {
 		React.useState(false);
 
 	const handleSubmit = () => {
+		const isValid = ref.current?.checkValidity();
+		if (!isValid) {
+			ref.current?.reportValidity();
+			return;
+		}
+
 		const formData = new FormData(ref.current!);
 
 		// if "avatarImgId" it means they want to reuse an existing avatar