Feature: Application Needs Consistent Error Validation

[nickytonline]

As a user of the OpenSauced application, I want a consistent styling and format for error validation in the application.

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

Currently in the application, the error validation is inconsistent. For example on the user settings page and the highlight form.

As well, when error validation fires, it needs to be accessible, i.e. in a an aria-live region.

I'd also recommend creating a base style for the :invalid pseudo-class in https://github.com/open-sauced/app/blob/beta/styles/globals.css

We should also leverage the HTML attributes for form elements for validation and type if we aren't already:

• pattern
• required (we are using this is some places)
• type="range"
• type="url"
• type="email"
• etc.

[nickytonline]

Some examples of the inconsistencies in the following PRs. This is not to call out the contributors on those PRs, it's just to demonstrate the inconsistencies in our error validation story.

• fix: make a valid highlight link required to post a highlight #2587
• fix: can't update user profile bio passed 256 chars #1898
• fix: adding regex pattern to validate twitter username input #1067