fix profile validation and regex error

mitodl · Aug 31, 2023 · e1c8bd8 · e1c8bd8
1 parent 1e05053
commit e1c8bd8
Showing 1 changed file with 25 additions and 18 deletions.
diff --git a/frontend/public/src/components/forms/ProfileFormFields.js b/frontend/public/src/components/forms/ProfileFormFields.js
@@ -23,26 +23,38 @@ import {
   usernameFieldErrorMessage
 } from "../../lib/validation"
 
-export const NAME_REGEX = "^(?![~!@&)(+:'.?,-]+)([^/\\^$#*=[\\]`%_;<>{}\"|]+)$"
+export const NAME_REGEX = /^(?![~!@&)(+:'.?/,`-]+)([^/^$#*=[\]`%_;<>{}"|]+)$/
 
 const seedYear = moment().year()
 
 // Field Error messages
 export const NAME_REGEX_FAIL_MESSAGE =
-  "Name cannot start with a special character ~!@&)(+:'.?,-, and cannot contain any of /^$#*=[]`%_;\\<>{}\"|"
+  "Name cannot start with a special character (~!@&)(+:'.?/,`-), and cannot contain any of (/^$#*=[]`%_;\\<>{}\"|)"
 
 export const fullNameRegex = "^.{2,255}$"
 const fullNameErrorMessage = "Full name must be between 2 and 254 characters."
 
 const countryRegex = "^\\S{2,}$"
 
 export const legalAddressValidation = yup.object().shape({
-  name:          yup.string().label("Full Name"),
+  name: yup
+    .string()
+    .label("Full Name")
+    .matches(fullNameRegex, fullNameErrorMessage)
+    .required(),
   legal_address: yup.object().shape({
-    first_name: yup.string().label("First Name"),
-    last_name:  yup.string().label("Last Name"),
-    country:    yup.string().label("Country"),
-    state:      yup
+    first_name: yup
+      .string()
+      .label("First Name")
+      .matches(NAME_REGEX, NAME_REGEX_FAIL_MESSAGE)
+      .required(),
+    last_name: yup
+      .string()
+      .label("First Name")
+      .matches(NAME_REGEX, NAME_REGEX_FAIL_MESSAGE)
+      .required(),
+    country: yup.string().label("Country"),
+    state:   yup
       .string()
       .label("State")
       .when("country", {
@@ -172,7 +184,6 @@ const renderYearOfBirthField = () => {
         className="form-control"
         autoComplete="bday-year"
         aria-describedby="user_profile.year_of_birth_error"
-        required
       >
         <option value="">-----</option>
         {reverse(range(seedYear - 120, seedYear - 13)).map((year, i) => (
@@ -181,6 +192,7 @@ const renderYearOfBirthField = () => {
           </option>
         ))}
       </Field>
+      <ErrorMessage name="user_profile.year_of_birth" component={FormError} />
     </div>
   )
 }
@@ -208,10 +220,8 @@ export const LegalAddressFields = ({
         autoComplete="given-name"
         aria-describedby="first-name-subtitle"
         aria-label="First Name"
-        required
-        pattern={NAME_REGEX}
-        title={NAME_REGEX_FAIL_MESSAGE}
       />
+      <ErrorMessage name="legal_address.first_name" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="legal_address.last_name" className="fw-bold">
@@ -224,10 +234,8 @@ export const LegalAddressFields = ({
         id="legal_address.last_name"
         className="form-control"
         autoComplete="family-name"
-        required
-        pattern={NAME_REGEX}
-        title={NAME_REGEX_FAIL_MESSAGE}
       />
+      <ErrorMessage name="legal_address.last_name" component={FormError} />
     </div>
     <div className="form-group">
       <label htmlFor="name" className="row">
@@ -246,10 +254,8 @@ export const LegalAddressFields = ({
         autoComplete="name"
         aria-describedby="full-name-subtitle"
         aria-label="Full Name"
-        required
-        pattern={fullNameRegex}
-        title={fullNameErrorMessage}
       />
+      <ErrorMessage name="name" component={FormError} />
     </div>
     {isNewAccount ? (
       <React.Fragment>
@@ -335,7 +341,7 @@ export const LegalAddressFields = ({
           id="legal_address.state"
           className="form-control"
           autoComplete="state"
-          required
+          aria-describedby="legal_address.state_error"
         >
           <option value="">-----</option>
           {findStates(values.legal_address.country, countries)
@@ -348,6 +354,7 @@ export const LegalAddressFields = ({
             )
             : null}
         </Field>
+        <ErrorMessage name="legal_address.state" component={FormError} />
       </div>
     ) : null}
     {isNewAccount ? (