Shopify contact form validation snippet
{%- 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 -%} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment