Adds basic form validation

[brianjhanson]

This started out as a request to help users remember to put http:// and https:// in their website addresses. This also adds a rough system for validating forms in general.

When a user submits the form, we run all of the values through a validateSignUpForm function which will return errors in an object with each input's key as a property. Something like:

{
    website: 'Please enter a valid URL',
    email: 'Please enter a valid email', 
    name: 'Name is required',
}

We then set this object to an errors state and use that to check when fields have errors we need to show.

Fixes #379

Pages/Interfaces that will change

• Register a business form

Screenshots / video of changes

Error when no protocol is present

Updated error display throughout the form

Gif of error experience

Steps to test

1. Go to the businesses page and click "Register a Business"
2. Fill out the website field without a protocol and submit

Additional notes

• In order to show errors correctly I had to wrap each form item in a FormControl element which updates the structure of the form a bit
• I updated the form to actually be a form component which should provide better accessibility and reduce a tiny bit of the complexity around it
• I think we should consider using Formik and Yup for this kind of thing down the road. Happy to open an issue for that if there's a desire for it.
• I made some minor updates to the visuals of the form, increasing the size of the modal and adjusting the spacing around each form "row"

[netlify[bot]]

Deploy request for rebuild-black-business accepted.

Accepted with commit f3a310c866c7afb434893f9108681c811643ae3b

https://app.netlify.com/sites/rebuild-black-business/deploys/5fb18f86a6110a000766f6a4

[brianjhanson]

@magnificode added a ticket for Formik + Yup over here. My first story here and it's not really a user focused story so please don't hesitate to let me know if I should add more detail.