Woocommerce-services: We should validate fields in the modal before leaving the modal

[allendav]

cc @kellychoffman - do you concur?

[jkudish]

@jeffstieler and I just discussed this. We agreed that:

• We'll have client side validation for the package to be able to show inline errors
• We'll also have server side validation for packages. Most users won't encounter this (since they'll hit client side validation first), but we'll need to be safe. Any returned errors from the server can highlight the package in question with a message to go and fix that package. We can then show the specific error in the modal. We'll need some design for this @kellychoffman

[kellychoffman]

do you concur?

I do indeed.

[kellychoffman]

We'll also have server side validation for packages. Most users won't encounter this (since they'll hit client side validation first), but we'll need to be safe. Any returned errors from the server can highlight the package in question with a message to go and fix that package.

Can you better explain this? Maybe with an example? I'm not sure I fully understand.

[jkudish]

Can you better explain this? Maybe with an example? I'm not sure I fully understand.

Yeah sorry, re-reading myself I see that it's not 100% clear.

In other words: when you add/edit a package we'll have instant client-side validation so you can immediately see any errors. We can disable the "add package"/"save changes" button until validation passes. However, we'll also need/have server-side validation which occurs after one clicks the main "Save changes" button of the form. Most users will have failed client validation so won't trigger an error with packages at this stage, but if they do, we'll need something to indicate which of the already saved boxes has an issue they need to address.

Does that make sense?

[kellychoffman]

Here's what I'm thinking:

We disable the 'Add packages' button until all the required fields are filled out. This way no packages will get added unless they are valid. In theory, anyway. When I was talking to @jeffstieler earlier, he mentioned it might be a good idea to plan for this anyways.

Add packages modal

On open:
(disabled primary button)

With error:
(contextual error message, primary button still disabled)

All good:
(primary button actived)

Package list

With error:
(Click to open modal and fix)

[kellychoffman]

Error state for rates section: