Add form validation to email in registration

[thywang]

Notion ticket link

Add form validation to verify valid email during registration

Implementation description

• Add regex check using existing email checking that matches with basic email addresses

Steps to test

1. Start the register flow to signup for a camp
2. When on Personal Info page, fill out necessary information except email in Primary Contact
3. Try:

• leaving Email field blank and click Next -> verify error message "Form does not pass validation" pops up
• enter a random sequence of characters in Email field and click Next -> verify error message "Form does not pass validation" pops up
• enter [email protected] and click Next -> verify error message "Form does not pass validation" pops up
• enter user.@com and click Next -> verify error message "Form does not pass validation" pops up
• enter user.@c@om and click Next -> verify error message "Form does not pass validation" pops up
• enter user@com and click Next -> verify error message "Form does not pass validation" pops up
• enter a valid email in Email field and click Next -> verify successfully loads Additional Info page

What should reviewers focus on?

• Error is displayed when email address is of invalid format
• Can't proceed to next page when email address is of invalid format
• Same behaviour for other email fields (e.g. Secondary Contact)

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[github-actions]

Visit the preview URL for this PR (updated for commit ca0cabc):

https://focus-on-nature--pr290-tina-add-form-valida-k1lz7pjr.web.app

_{(expires Tue, 08 Aug 2023 01:10:08 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 0aeb3dd1cc2aa82265739c366a8befd0d956fd1f}

[williamtran10]

There are two cases in the code where the following is found:

export const checkEmail = (email: string): boolean => {
  const emailRegex = new RegExp("[a-z0-9]+@[a-z]+\\.[a-z]{2,3}");
  return emailRegex.test(email);
};

How does your code differ and should we update those other checkEmail functions?

[thywang]

Thanks, that's a great point. Upon testing with several inputs, it seems they work the same for general email checking purposes. It wouldn't make sense for them to be different -- I've updated the one in the latest commit to use the existing function.

[williamtran10]

LGTM, feel free to merge.