Shopify contact form validation snippet

form-status.liquid

{%- if form.posted_successfully? -%}
  <p class="form-message form-message--success" tabindex="-1" data-form-status>
    {{ success_message | default: 'contact.form.post_success' | t }}
  </p>
{%- endif -%}

{% comment %} We need to add this so the errors are output in the right order {% endcomment %}
{% assign error_order = "author, email, body, password, form" | split: ", " %}

{%- if form.errors -%}

  <div class="form-message form-message--error">
    <h2 class="h3 form-message__title " tabindex="-1" data-form-status>{{ 'contact.form.error_heading' | t }}</h2>
    <ul>
      {% for error in error_order %}
        {% for field in form.errors %}
          {% if error == field %}

            {% capture field_label %}
              {% case field %}
                {% when 'author' %}
                  {{ 'contact.form.name' | t }}
                {% when 'body' %}
                  {{ 'contact.form.message' | t }}
                {% else %}
                  {{ form.errors.translated_fields[field] }}
              {% endcase %}
            {% endcapture %}

            <li>
              {%- if field == 'form' -%}
                {{ form.errors.messages[field] }}
              {%- else -%}
                {% comment %} the href should match the input's id {% endcomment %}
                <a href="#{{ form_id }}-{{ field }}" class="form-message__link">{{ field_label | strip | capitalize }} {{ form.errors.messages[field] }}</a>
              {%- endif -%}
            </li>
          {% endif %}
        {% endfor %}
      {% endfor %}
    </ul>
  </div>
{%- endif -%}