Only one error is displayed at a time on validation error - The error is displayed at the top of the form instead of next to the field

[MaxwellGarceau]

Is your enhancement related to a problem? Please describe.

When multiple fields have validation errors, the form only displays one of those errors. Furthermore, the error is displayed at the top of the form instead of underneath the field where the error occurred.

only-one-error-message-is-displayed-at-a-time.mov

Designs

Revamp the FE error message system to output multiple error messages underneath the fields they are attached to. This could be done in conjunction with #100 using more or less the same proposed solution.

I'm guessing that the majority of the validation is done on the Mailchimp API. If this is the case, we can probably still overhaul the validation by populating one of the global variables ($_POST) with the error messages and writing conditional checks to display those messages where appropriate.

Describe alternatives you've considered

Since the field that the error message belongs to is included in the message the bare minimum is met. However, we should at least retrieve all of the error messages from the API and display them to the user.

Code of Conduct

• I agree to follow this project's Code of Conduct

[iamdharmesh]

The API only responds with one error at a time. So, to display multiple errors simultaneously, we need to implement custom validation. Currently, we rely on the Mailchimp API for all validations. Therefore, this issue is a good opportunity to add some client-side and server-side validation before calling the Mailchimp API. (We have the required validations in place, but they are not currently working due to a bug.)