[webapp] Improve client side form handling/errors UX

[tomlynchRNA]

Currently there is very little frontend form validation besides some required and pattern fields. This needs to be expanded to encompass all fields of all forms. Most forms are located and named like components/*Form.tsx

One option is relying on native form validation (required, pattern, minlength, maxlength, etc). This means as long as a form is submitted in a <form> and our handler is in the onSubmit, we don't have to write custom code to validate each input field. However this will struggle with custom components such as react-tailwindcss-select because they don't have an underlying input field that matches the state of what is selected.

Alternatively, you could use an approach similar to material ui where they have a helperText and error props on input fields that you set yourself.

Discuss in this comment which solution (or suggest another) you think is best before going ahead.