Re: Customer form - validation / error not working properly

Solved

Customer form - validation / error not working properly

leungvi8
Shopify Partner
20 1 3

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>

 

Accepted Solution (1)
namphan
Shopify Partner
2263 296 332

This is an accepted solution.

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 4 (4)

namphan
Shopify Partner
2263 296 332

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 %}

 

 

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
leungvi8
Shopify Partner
20 1 3

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.

leungvi8
Shopify Partner
20 1 3

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

namphan
Shopify Partner
2263 296 332

This is an accepted solution.

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com