[Bug]: form.errors displayed only after refreshing page

rabuso commented 1 week ago

Please confirm that you have:

[x] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[x] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme, Function

Expected behavior

when an error occurs in a form, the form.errors.messages[error] should display the error messages after clicking on the submit button. Example : email field with missing .com.

Actual behavior

The form error message is displayed only after a refresh of the page containing the form. However, the message triggered by form.posted_successfully? is displayed directly after the clicking on the submit button.

Please note that it works properly when the form is defined inside in a liquid template file, using the exact same code. It's not working when the form is added as a section (sections/contact-form.liquid) in a page using the theme editor.

Verbose output

..

Reproduction steps

Complete the fields of the form (eg. : contact form)
Set an incorrect email address : test@test
Submit the form

Operating System

Windows11

Shopify CLI version (check your project's `package.json` if you're not sure)

3.68.1

Shell

Powershell (VS code)

Node version (run `node -v` if you're not sure)

v20.17.0

What language and version are you using in your application?

No response

lucyxiang commented 5 days ago

Hello @rabuso, for which CLI command is this happening? Does this error occur for a theme in the shopify admin in production as well?

rabuso commented 5 days ago

Hello @lucyxiang , I'm still in dev. You can simply reproduce this issue by using the standard Dawn theme. Preview the contact page, enter an incorrect email (hello@world), fill the other fields and then press Send. No error message is displayed, but the message is not sent. Refresh the page: the error message is displayed : email is invalid.

Do the same with a correct email address. After clicking the send button, a confirmation message is displayed. Apparently that issue is present in production also (try any live shop: eg : https://judy.co/pages/contact)

Have a nice day. Kind regards,

lucyxiang commented 3 days ago

If the issue is present in production, then this is not a CLI issue but a problem with the theme.

rabuso commented 2 days ago

ok, you can close it.

Shopify / cli