diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx index 9db877bb40d..d66a9bbff4d 100644 --- a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx +++ b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx @@ -4,7 +4,7 @@ "use client"; -import { ChangeEvent, useEffect, useState } from "react"; +import { ChangeEvent, useEffect, useRef, useState } from "react"; import { useFormState } from "react-dom"; import { useOverlayTriggerState } from "react-stately"; import { useOverlayTrigger } from "react-aria"; @@ -84,6 +84,7 @@ export const EmailAddressAdder = () => { const EmailAddressAddForm = () => { const l10n = useL10n(); const recordTelemetry = useTelemetry(); + const formRef = useRef(null); const [formState, formAction] = useFormState(onAddEmail, {}); const [hasPressedButton, setHasPressedButton] = useState(false); const [email, setEmail] = useState(""); @@ -101,11 +102,7 @@ const EmailAddressAddForm = () => { }; const isEmailValid = () => { - // Regex for checking email format - // ensuring it contains a local part, an "@" symbol, - // and a domain part. - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailRegex.test(email); + return email.length > 0 && (formRef.current?.reportValidity() ?? false); }; return !formState.success ? ( @@ -115,7 +112,11 @@ const EmailAddressAddForm = () => { total: CONST_MAX_NUM_ADDRESSES, })}

-
+ @@ -131,7 +132,9 @@ const EmailAddressAddForm = () => { className={styles.btn} disabled={!isEmailValid()} onPress={() => { - setHasPressedButton(true); + if (isEmailValid()) { + setHasPressedButton(true); + } }} isLoading={hasPressedButton} >