notes upgrade

src/components/ContactForm.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
 import type { ChangeEvent } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 
+const EMAIL_REGEX = /^[a-zA-Z0-9._%+\-]{1,64}@[a-zA-Z0-9.\-]{1,253}\.[a-zA-Z]{2,}$/
+
 interface ContactFields {
   firstName: string
   lastName: string
@@ -37,9 +39,23 @@ export default function ContactForm() {
   const [honey, setHoney] = useState('')
   const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
   const [errorMsg, setErrorMsg] = useState('')
+  const [fieldErrors, setFieldErrors] = useState<{ email?: string }>({})
 
   function handleChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    setFields(f => ({ ...f, [e.target.name]: e.target.value }))
+    const { name, value } = e.target
+    setFields(f => ({ ...f, [name]: value }))
+    if (name === 'email' && fieldErrors.email) {
+      setFieldErrors(prev => ({ ...prev, email: undefined }))
+    }
+  }
+
+  function handleEmailBlur() {
+    if (!fields.email) return
+    if (!EMAIL_REGEX.test(fields.email)) {
+      setFieldErrors(prev => ({ ...prev, email: 'Please enter a valid email address.' }))
+    } else {
+      setFieldErrors(prev => ({ ...prev, email: undefined }))
+    }
   }
 
   function handleSelectChange(e: ChangeEvent<HTMLSelectElement>) {
@@ -93,7 +109,17 @@ export default function ContactForm() {
       </label>
       <label>
         Email
-        <input type="email" name="email" required autoComplete="email" value={fields.email} onChange={handleChange} />
+        <input
+          type="email"
+          name="email"
+          required
+          autoComplete="email"
+          value={fields.email}
+          onChange={handleChange}
+          onBlur={handleEmailBlur}
+          aria-describedby={fieldErrors.email ? 'contact-email-error' : undefined}
+        />
+        {fieldErrors.email && <span id="contact-email-error" className="study-signup-field-error">{fieldErrors.email}</span>}
       </label>
       <label>
         Message Type