How to add form validation if email is already registered as customer?

[danestan]

I am using a Shopify customer type form, so that it adds the email of the user as a customer but when a user enters an existing customer email address the 'form.errors' is empty. How can I catch that type of error?

Please check the code below.

{% form 'customer', id: formId, class: 'newsletter-form' %}
<input type="email" name="contact[email]" id="{{ formId }}-email" class="input-group__field newsletter__input{% if form.errors %} input--error{% endif %}" value="{{ form.email }}" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}" aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}" aria-required="true" required autocorrect="off" autocapitalize="off" {% if form.errors %} aria-invalid="true" aria-describedby="{{ formId }}-email-error" data-form-status {% endif %}>
     {%- if form.posted_successfully? -%}
           //do something
     {%- else -%}
           {% if form.errors %}
               //do something
          {%- endif -%}         
     {%- endif -%}
{% endform %}

[Morek]

Hi @danestan 

Hope you're having a great day!

See more details on how to customize the customer registration form.

If you have any further questions, please do reach out either here on the forum, or via private message/email.

[pjhardie]

Bump on this. Has anyone come up with a way to provide some user feedback to users who enter an email address that is already registered? As OP says, there are no form errors displayed so it's not an ideal UX.

[pjhardie]

We ended up coming with a solution that seems to work well. 

When someone who is already a customer attempts to complete the customer form (which is the form used for the footer signup and for the newsletter section in Dawn), the page seems to reload without submitting but '?contact%5Btags%5D=newsletter&form_type=customer' is appended to the url. 

Based on this, you can run some JS to examine the URL and if it contains this url suffix, then insert some html that contains a message to let customers that they are already signed up. We've used this with a current client and it seems to work well. 

Hope that helps.

[matheus_alce]

I found a solution using only Liquid.

First, you add a hidden input with a note just after opening the form:

{% form 'customer', class: 'newsletter-form' %}
  <input type="hidden" name="contact[tags]" value="newsletter">

Then, when the email has already been registered, the form triggers an error for that input. Using this, it is possible to show a message:

{%- liquid
  assign email_registered = false
  if form.errors.messages.size == 1
    comment
      If there is only one error, check if it is type "note"
    endcomment
    for message in form.errors.messages
      if message contains "note"
        assign email_registered = true
      endif
    endfor
  endif
-%}

If the form has more fields, it can need some adjustments. Below is the complete code. It was made based on Dawn's code.

{% form 'customer', class: 'newsletter-form' %}
  <input type="text" name="contact[note][source]" value="newsletter" hidden>
  <div class="newsletter-form__field-wrapper">
    <div class="field">
      <input
        id="NewsletterForm--{{ section.id }}"
        type="email"
        name="contact[email]"
        class="field__input"
        value="{{ form.email }}"
        aria-required="true"
        autocorrect="off"
        autocapitalize="off"
        autocomplete="email"
        {% if form.errors %}
          autofocus
          aria-invalid="true"
          aria-describedby="Newsletter-error--{{ section.id }}"
        {% elsif form.posted_successfully? %}
          aria-describedby="Newsletter-success--{{ section.id }}"
        {% endif %}
        placeholder="{{ 'newsletter.label' | t }}"
        required
      >
      <label class="field__label" for="NewsletterForm--{{ section.id }}">
        {{ 'newsletter.label' | t }}
      </label>
      <button
        type="submit"
        class="newsletter-form__button field__button"
        name="commit"
        id="Subscribe"
        aria-label="{{ 'newsletter.button_label' | t }}"
      >
        {% render 'icon-arrow' %}
      </button>
    </div>
  </div>
  
  {%- if form.posted_successfully? -%}
    <h3
      class="newsletter-form__message newsletter-form__message--success form__message"
      id="Newsletter-success--{{ section.id }}"
      tabindex="-1"
      autofocus
    >
      {% render 'icon-success' %}{{ 'newsletter.success' | t }}
    </h3>
  {%- elsif form.errors -%}
    {%- liquid
      assign email_registered = false
      if form.errors.messages.size == 1
        comment
          If there is only one error, check if it is type "note"
        endcomment
        for message in form.errors.messages
          if message contains "note"
            assign email_registered = true
          endif
        endfor
      endif
    -%}
      
    {%- if email_registered -%}
      <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %} Email Is Already Registered</small>
    {%- else -%}
      <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
    {%- endif -%}
  {%- endif -%}
{% endform %}

[Nidarazzaq]

Can you please help me with this ? Used your given code but can't find the problem because there were many errors on my side. 

[Catalin_G]

Once the form is submitted it seems we have access to some extra stuff inside the form object. Simply do a dump of `{{ form | json }}` inside the form and you will get something like this:

FORM JSON: {"posted_successfully?":false,"errors":null,"tags":"newsletter","email":"email@email.com"}

 I have then just added a check to see if the errors  are empty, it contains, in my case the tag "newsletter" and check if email is empty.

{%- if form.errors == nil and form.email != blank and form.tags == "newsletter" -%}
	<p class="alert alert--error">
           {{ 'home_page.newsletter.already_registered' | t }}
        </p>
{%- endif -%}

Hope it helps someone. Cheers!