Forms: Manipulate {form.errors} & Data Verification

Technical Q&A

Topic summary

A developer is encountering issues with Shopify theme form validation and error handling, specifically with the contact form.

Three main problems identified:

  1. Required field validation: Adding aria-required="true" to name and body fields doesn’t trigger error messages in {form.errors} when submitted blank—only the default email validation appears.

  2. Client-side validation bypass: Browser inspector allows users to delete the aria-required="true" attribute or tag ID, potentially enabling corrupted data or empty messages to be submitted to the backend.

  3. Success message persistence: After form submission, the success message continues displaying even when the page refreshes.

The developer included a code snippet showing their current error loop implementation but the text appears corrupted/reversed in the original post. A follow-up comment indicates the community response has been limited, and another user reports experiencing the same issues. Status: Unresolved, seeking solutions for backend data verification and proper error handling.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello

I am new to the dev’s community, thank you for your support

I’m testing the forms for a new theme & I’m having some small problems. Let’s take as ex. the contact form with the fields, contact[name], contact[email], contact[phone], contact[body]

  1. To make fields required (name & body) I have added {aria-required=“true”}, but when I post a blank form, only email (default) that appears among the errors with the code below. How can I manipulate {form.errors}?
<ul>
  {% for error in form.errors %}
    <li>
      {% if error == 'form' %}
        {{ form.errors.messages[error] }}
      {% else %}
        {{ form.errors.translated_fields[error] }} - {{ form.errors.messages[error] }}
      {% endif %}
    </li>
  {% endfor %}
</ul>

  1. With the browser inspector, we can delete {aria-required=“true”} or the tag id if I manage it in js, how can we check in back-end data to avoid receiving empty messages or saving corrupted data?

  2. When submitting a form, the success message will still be displayed even if the page is refresh. Can a single display be made?

Thank you

2

The Community is not very reactive :disappointed_face:

3

Hi
Did you find any solution for your problem?
I have the same problem