adapt ValidatedTextField to accept custom validation functions

[angela-lee1]

Fixes #1484

What changes did you make and why did you make them ?

• Adapt ValidatedTextField to apply custom validations into the validate portion of the register function from react-hook-form

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

image

Visuals after changes are applied

[image](

)

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b angela-lee1-accept-custom-validation-functions development
git pull https://github.com/angela-lee1/VRMS.git accept-custom-validation-functions

[pluto-bell]

@angela-lee1 it looks like one of your changes caused a change on styling as well.

Before and After

Notice how the form was previously encapsulated by the same grey background as the section above it and included different padding/margin.

Potential Cause

It looks like the `form` component got removed as a child from a `div` component with a `MuiBox-css` class. Notice how the `form` component was previously nested

[JackHaeg]

@angela-lee1 Just checking in on this PR! Were you able to address the styling concerns that @pluto-bell mentioned in her review above?

[angela-lee1]

@JackHaeg will get this resolved before next team meeting. Sorry.

[JackHaeg]

No problem, @angela-lee1! Thanks in advance for working on this!