Customer form - validation / error not working properly

Solved
leungvi8
Excursionist
16 1 1

Hello Shopify World,

My team been looking at this issue for a while and hoping someone online can help us. We have this newsletter section created for our home page, and upon submission (after the captcha step) the user should either get a "Toast trigger" of form successful (Newsletter subscribed) OR ... error message and having the  {{ form.errors | default_errors }} message pop up inside the toast.

So far the toasts triggers, and the successful message works great. However, the error validation keeps triggering (even if we visit the page for the first time) AND we don't see any error message but just "{{ form.errors | default_errors }}". I've attached the sections code in case anyone notices any coding issues:

Appreciate any help like always!

Vince

<div class="container py-5">
    <div class="row">
        <div class="col-md-4">
            <h5>{{set.title}}</h5>
        </div>
        <div class="col-md-1"></div>
        <div class="col">
            {% form 'customer' %}
                <div class="row g-2 d-flex align-items-end">
                    <div class="col-8">
                        <label for="customerEmail" class="news_label--style"><p>{{set.form_label}}</p></label>
                        <input id="customerEmail" type="email"
                        name="contact[email]"
                        class="form-control news_input--style"
                        value="{%- if customer -%}{{ customer.email }}{%- endif -%}"
                        autocorrect="off"
                        autocapitalize="off" required>
                    </div>
                    <div class="col-4">
                        <button type="submit" class="btn primary_btn--style news_btn--style" value="{{contact.form.send | t }}">SUBSCRIBE</button>
                    </div>
                </div>
                {% if form.posted_successfully? %}
                    {% assign toast_title = 'Success' %}
                    {% assign toast_message = 'Thank you for signing up to our newsletter!' %}
                    {% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
                {% else %}
                    {% assign toast_title = 'Fail' %}
                    {% assign toast_message = "Something went wrong. {{ form.errors | default_errors }}" %}
                    {% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
                {% endif %}
            {% endform %}
        </div>
    </div>
</div>

 

0 Likes
namphan
Tourist
24 2 5

Hi ,

You can change the code at if:

 

{% if form.posted_successfully? %}
                    {% assign toast_title = 'Success' %}
                    {% assign toast_message = 'Thank you for signing up to our newsletter!' %}
                    {% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
                {% elsif form.errors  %}
                    {% assign toast_title = 'Fail' %}
                    {% assign toast_message = "Something went wrong. {{ form.errors | default_errors }}" %}
                    {% render 'toasts-module' toast_title: toast_title, toast_message: toast_message %}
                {% endif %}

 

 

0 Likes
leungvi8
Excursionist
16 1 1

Unfortunately, I did try this, but what tends to happen is the error message doesn't register right away (toast does not trigger). However, if i refresh the page... than i see the error.

0 Likes
leungvi8
Excursionist
16 1 1

Oh and the Success seems to work now, but fail trigger doesn't seem to popup right away.

0 Likes
namphan
Tourist
24 2 5

This is an accepted solution.

It might be because toasts doesn't work when you reload the content. Please contact toasts for better support

0 Likes