Merge pull request #4969 from mozilla/revert-4964-MNTOR-3496-validati…

…on-disable Revert "Align disabled state with email validation"
mozilla · Aug 21, 2024 · 864e7bc · 864e7bc
2 parents 46cb9a8 + 8781b06
commit 864e7bc
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/...(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx b/...(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/EmailAddressAdder.tsx
@@ -4,7 +4,7 @@
 
 "use client";
 
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { useFormState } from "react-dom";
 import { useOverlayTriggerState } from "react-stately";
 import { useOverlayTrigger } from "react-aria";
@@ -84,7 +84,6 @@ export const EmailAddressAdder = () => {
 const EmailAddressAddForm = () => {
   const l10n = useL10n();
   const recordTelemetry = useTelemetry();
-  const formRef = useRef<HTMLFormElement>(null);
   const [formState, formAction] = useFormState(onAddEmail, {});
   const [hasPressedButton, setHasPressedButton] = useState(false);
   const [email, setEmail] = useState("");
@@ -102,7 +101,11 @@ const EmailAddressAddForm = () => {
   };
 
   const isEmailValid = () => {
-    return email.length > 0 && (formRef.current?.reportValidity() ?? false);
+    // 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 !formState.success ? (
@@ -112,11 +115,7 @@ const EmailAddressAddForm = () => {
           total: CONST_MAX_NUM_ADDRESSES,
         })}
       </p>
-      <form
-        action={formAction}
-        ref={formRef}
-        className={styles.newEmailAddressForm}
-      >
+      <form action={formAction} className={styles.newEmailAddressForm}>
         <label htmlFor="newEmailAddress">
           {l10n.getString("add-email-address-input-label")}
         </label>
@@ -132,9 +131,7 @@ const EmailAddressAddForm = () => {
           className={styles.btn}
           disabled={!isEmailValid()}
           onPress={() => {
-            if (isEmailValid()) {
-              setHasPressedButton(true);
-            }
+            setHasPressedButton(true);
           }}
           isLoading={hasPressedButton}
         >