Error message on email form is not working

fedmax
New Member
3 0 0

Hi there,

 

I'm currently building my first custom theme on Shopify.

 

I have a newsletter form in my footer and I would like to display a error message when the user submits the form with an invalid email or when the input field is left blank.

 

At the moment, when I submit with an empty field, the form loads a captcha page.

If I submit with an invalid email address, I can only see an error message in a tooltip but this is not what I want. I would like the error message to display in a <div> on the same page.

 

How can I achieve this?

 

My code is the following:

{% form 'customer', name: 'signup-form' %}
          <input type="email" class="form-control" name="customer[email]" id="email" value="{% if customer.email != blank %}{{ customer.email }}{% endif %}" placeholder="{{section.settings.placeholder}}">
          <span class="input-btn">
            <button type="submit" class="email-submit" >Submit</button>
          </span>
          {% if form.posted_successfully? %}
            <p class="note form-success">
              Thank you!
            </p>
          {% endif %}
          {% if form.errors %}
            <div class="form-message form-message--error">
              {{ form.errors | default_errors }}
            </div>
          {% endif %}
        {% endform %}

Thanks!

0 Likes
omcpheely
New Member
2 0 1

Hi @fedmax,

Did you ever manage to acheive this? I am experiencing the same issue and I cannot seem to find a resolution.

Thanks in advance,

Oliver.

freya0328
Explorer
123 1 14

I also have this problem now, and I don't know how to solve it.

0 Likes
fedmax
New Member
3 0 0

Hi @omcpheely

I don't think it's possible to remove the captcha but I was able to create a custom javascript function using regex.

This was a very good tutorial https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145

Hope it helps

 

0 Likes