custom error message for mismatched emails

TritonSE · May 9, 2024 · be13fef · be13fef
1 parent 1c25282
commit be13fef
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 44 deletions.
diff --git a/frontend/src/components/Step1.tsx b/frontend/src/components/Step1.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import devices from "../constants/devices.json";
 import genders from "../constants/genders.json";
 
@@ -8,6 +10,18 @@ type Step1Props = {
 };
 
 export function Step1({ onSubmit }: Step1Props) {
+  const [email, setEmail] = useState<string>("");
+  const [confirmEmail, setConfirmEmail] = useState<string>("");
+
+  const handleConfirmEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setConfirmEmail(e.target.value);
+    e.target.setCustomValidity(""); // Reset custom validity on input change
+  };
+
+  const handleInvalid = (event: React.InvalidEvent<HTMLInputElement>) => {
+    event.target.setCustomValidity("Email addresses do not match");
+  };
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     onSubmit();
@@ -20,7 +34,7 @@ export function Step1({ onSubmit }: Step1Props) {
         <ul>
           <li className={styles.bulletPoint}>
             <p className={styles.listText}>
-              <strong className={styles.red}>
+              <strong className={styles.boldRed}>
                 Do NOT submit an application until ready to begin sitting for the IDEX California®
                 Examination.
               </strong>
@@ -115,7 +129,12 @@ export function Step1({ onSubmit }: Step1Props) {
           <div className={styles.inputBox}>
             <label className={styles.inputTitle}>
               Gender<span className={styles.boldRed}>*</span>
-              <select className={styles.inputText} id="drop" defaultValue={"default"} required>
+              <select
+                className={styles.inputText}
+                id="genderDrop"
+                defaultValue={"default"}
+                required
+              >
                 <option value="default" className={styles.optionDefault} disabled>
                   Select One
                 </option>
@@ -146,7 +165,12 @@ export function Step1({ onSubmit }: Step1Props) {
               Email Address<span className={styles.boldRed}>*</span>
               <input
                 className={styles.inputText}
-                type="text"
+                type="email"
+                name="email"
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                }}
                 placeholder="Enter Email Address"
                 required
               />
@@ -155,7 +179,7 @@ export function Step1({ onSubmit }: Step1Props) {
           <div className={styles.inputBox}>
             <label className={styles.inputTitle}>
               Phone Type<span className={styles.boldRed}>*</span>
-              <select className={styles.inputText} defaultValue={"default"} id="drop" required>
+              <select className={styles.inputText} defaultValue={"default"} id="phoneDrop" required>
                 <option value="default" className={styles.optionDefault} disabled>
                   Select Phone Type
                 </option>
@@ -176,8 +200,13 @@ export function Step1({ onSubmit }: Step1Props) {
               Confirm Email Address<span className={styles.boldRed}>*</span>
               <input
                 className={styles.inputText}
-                type="text"
+                type="email"
+                name="confirmEmail"
                 placeholder="Enter Email Address"
+                value={confirmEmail}
+                onInvalid={handleInvalid}
+                onChange={handleConfirmEmailChange}
+                pattern={email}
                 required
               />
             </label>
@@ -187,8 +216,9 @@ export function Step1({ onSubmit }: Step1Props) {
               Phone Number<span className={styles.boldRed}>*</span>
               <input
                 className={styles.inputText}
-                type="text"
+                type="tel"
                 placeholder="Enter Phone Number"
+                pattern="[0-9]{10}"
                 required
               />
             </label>
@@ -228,19 +258,14 @@ export function Step1({ onSubmit }: Step1Props) {
           </div>
           <div className={styles.inputBox}>
             <label className={styles.inputTitle}>
-              Zip<span className={styles.boldRed}>*</span>
-              <input
-                className={styles.inputText}
-                type="text"
-                placeholder="Enter Zip Code"
-                required
-              />
+              Zip
+              <input className={styles.inputText} type="number" placeholder="Enter Zip Code" />
             </label>
           </div>
           <div className={styles.inputBox}>
             <label className={styles.inputTitle}>
-              County<span className={styles.boldRed}>*</span>
-              <input className={styles.inputText} type="text" placeholder="Enter County" required />
+              County
+              <input className={styles.inputText} type="text" placeholder="Enter County" />
             </label>
           </div>
           <div className={styles.inputBox}>

diff --git a/frontend/src/components/Step2.tsx b/frontend/src/components/Step2.tsx
@@ -50,6 +50,7 @@ function SchoolSection({ pathNumber }: { pathNumber: number }) {
                 <h3 className={styles.subTitle}>{"School " + school.id}</h3>
                 {school.id > 1 && (
                   <button
+                    type="button"
                     className={styles.deleteButton}
                     onClick={() => {
                       deleteSchool(school.id);
@@ -154,6 +155,7 @@ function SchoolSection({ pathNumber }: { pathNumber: number }) {
                       type="text"
                       name={`startDate${index}`}
                       placeholder="mm/yyyy"
+                      pattern="^(0[1-9]|1[0-2])/(19|20)\d{2}$"
                       required={isRequired}
                     />
                   </label>
@@ -167,6 +169,7 @@ function SchoolSection({ pathNumber }: { pathNumber: number }) {
                       type="text"
                       name={`endDate${index}`}
                       placeholder="mm/yyyy"
+                      pattern="^(0[1-9]|1[0-2])/(19|20)\d{2}$"
                       required={isRequired}
                     />
                   </label>
@@ -236,6 +239,7 @@ function ProfessionalAssociationSection() {
               <div className={styles.titleContainer}>
                 <h3 className={styles.subTitle}>{"Membership " + association.id}</h3>
                 <button
+                  type="button"
                   className={styles.deleteButton}
                   onClick={() => {
                     deleteAssociation(association.id);
@@ -317,6 +321,7 @@ function NationalExamSection() {
               Date of National Exam<span className={styles.boldRed}>*</span>
               <input
                 className={styles.inputText}
+                name="exam-date"
                 type="text"
                 placeholder="mm/dd/yyyy"
                 pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
@@ -329,14 +334,15 @@ function NationalExamSection() {
               Certificate Number<span className={styles.boldRed}>*</span>
               <input
                 className={styles.inputText}
+                name="certificate-number"
                 type="text"
                 placeholder="Enter Certificate Number"
                 required
               />
             </label>
           </div>
         </div>
-        <button className={styles.upload}>
+        <button type="button" className={styles.upload}>
           Upload Proof of National Exam
           <img src={upload} className={styles.uploadButton} alt="buttonpng" />
         </button>
@@ -378,6 +384,7 @@ function ICCCourses() {
                 <h3 className={styles.subTitle}>{"Course " + course.id}</h3>
                 {course.id > 1 && (
                   <button
+                    type="button"
                     className={styles.deleteButton}
                     onClick={() => {
                       deleteCourse(course.id);
@@ -400,7 +407,7 @@ function ICCCourses() {
                     <select
                       className={styles.inputText}
                       defaultValue={"default"}
-                      id="courseDrop"
+                      id={`courseDrop${course.id}`}
                       required
                     >
                       <option value="default" className={styles.optionDefault} disabled>
@@ -420,30 +427,19 @@ function ICCCourses() {
                 </div>
                 <div className={styles.inputBox}>
                   <label className={styles.inputTitle}>
-                    Professional Association Membership<span className={styles.boldRed}>*</span>
+                    Date of Completion<span className={styles.boldRed}>*</span>
                     <input
                       className={styles.inputText}
                       type="text"
-                      name={`email_${index}`}
-                      placeholder="Enter your Membership"
-                      required
-                    />
-                  </label>
-                </div>
-                <div className={styles.inputBox}>
-                  <label className={styles.inputTitle}>
-                    Certificate Number<span className={styles.boldRed}>*</span>
-                    <input
-                      className={styles.inputText}
-                      type="text"
-                      name={`certNun${index}`}
-                      placeholder="Enter Certificate Number"
+                      name={`complete_${index}`}
+                      placeholder="mm/dd/yyyy"
+                      pattern="^(0[1-9]|1[0-2])/(0[1-9]|[1-2][0-9]|3[0-1])/(19|20)\d{2}$"
                       required
                     />
                   </label>
                 </div>
               </div>
-              <button className={styles.upload}>
+              <button type="button" className={styles.upload}>
                 Upload Proof of Course Completion
                 <img src={upload} className={styles.uploadButton} alt="buttonpng" />
               </button>
@@ -467,28 +463,25 @@ export function Step2({ pathNumber, onSubmit }: Step2Props) {
     onSubmit();
   };
 
-  if (pathNumber === 1 || pathNumber === 2) {
-    content = <ProfessionalAssociationSection></ProfessionalAssociationSection>;
-  } else if (pathNumber === 3) {
+  if (pathNumber === 3) {
     content = (
       <>
-        <NationalExamSection></NationalExamSection>
-        <ProfessionalAssociationSection></ProfessionalAssociationSection>
+        <NationalExamSection />
       </>
     );
   } else if (pathNumber === 4) {
     content = (
       <>
-        <NationalExamSection></NationalExamSection>
-        <ICCCourses></ICCCourses>
-        <ProfessionalAssociationSection></ProfessionalAssociationSection>
+        <NationalExamSection />
+        <ICCCourses />
       </>
     );
   }
   return (
     <form id="step2-form" className={styles.formContainer} onSubmit={handleSubmit}>
-      <SchoolSection pathNumber={pathNumber}></SchoolSection>
+      <SchoolSection pathNumber={pathNumber} />
       {content}
+      <ProfessionalAssociationSection />
     </form>
   );
 }
diff --git a/frontend/src/components/Steps.module.css b/frontend/src/components/Steps.module.css
@@ -82,8 +82,8 @@
   color: #6c6c6c;
 }
 
-::placeholder {
-  color: var(--color-accent);
+input::placeholder {
+  color: var(--color-accent) !important;
   opacity: 1; /* Firefox */
 }