Display all errors inline on Cart & Checkout

[alexflorisca]

Is your feature request related to a problem? Please describe.

I think it's a bit confusing for users to have errors that are displayed both inline next to form fields, and in the standard Wordpress notices. I've included two example videos below

1. Similar error displayed twice

https://user-images.githubusercontent.com/3966773/172851148-6e86daba-0b83-44ed-a02d-bf8fab1f6290.mov

2. Error only displayed in notice bar and not visible while entering input

https://user-images.githubusercontent.com/3966773/172851271-1496dd6e-93a9-4303-9116-334cd1ac7cee.mov

Describe the solution you'd like

I would be great to consolidate these and show only inline errors

Describe alternatives you've considered

Additional context

This mainly applies to the Checkout block, but it may also apply to the Cart block

[github-actions[bot]]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[mikejolley]

This is probably the most important next step for error handling:

• Do not push changes if validation errors exist
• Validate on type
• (possibly) redirect API level errors to individual fields to prevent block level notices when there is a mismatch between client side validation logic, and server side validation logic

[ralucaStan]

The email issue was solved in https://github.com/woocommerce/woocommerce-blocks/pull/7755 and there is a PR for fixing the postal code validation https://github.com/woocommerce/woocommerce-blocks/pull/7945.

For the moment I think there are no other instances of this behavior in the block and it's a better experience than before. Top-level notices after the form submission don't appear now at the top of the form but at section-level; this is closer to the input triggering the issue, but I agree that the ideal case should be to add an error state to that particular input.

This is a big change for the current system, so it would be good to discuss the pros and cons, and what are our limitations.

[ralucaStan]

I'm closing this ticket for now. We can reopen in the future if we want to change this based on extra feedback