Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi, I need to add a field for customers when they register to enter their birthday because I my products are 18+.
So in total i have two problems.
Problem 1: This field should be REQUIRED, but everything I do it I wont get it to be required.
Current code:
<div class="customer register section-{{ section.id }}-padding">
<svg style="display: none">
<symbol id="icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</symbol>
</svg>
<h1>
{{ 'customer.register.title' | t }}
</h1>
{%- form 'create_customer', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<h2 class="form__message" tabindex="-1" autofocus>
<svg aria-hidden="true" focusable="false">
<use href="#icon-error" />
</svg>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
<ul>
{%- for field in form.errors -%}
<li>
{%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
<a href="#RegisterForm-{{ field }}">
{{ form.errors.translated_fields[field] | capitalize }}
{{ form.errors.messages[field] }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<div class="field">
<input
type="text"
name="customer[first_name]"
id="RegisterForm-FirstName"
{% if form.first_name %}
value="{{ form.first_name }}"
{% endif %}
autocomplete="given-name"
placeholder="{{ 'customer.register.first_name' | t }}"
>
<label for="RegisterForm-FirstName">
{{ 'customer.register.first_name' | t }}
</label>
</div>
<div class="field">
<input
type="text"
name="customer[last_name]"
id="RegisterForm-LastName"
{% if form.last_name %}
value="{{ form.last_name }}"
{% endif %}
autocomplete="family-name"
placeholder="{{ 'customer.register.last_name' | t }}"
>
<label for="RegisterForm-LastName">
{{ 'customer.register.last_name' | t }}
</label>
</div>
<div class="field">
<input
type="email"
name="customer[email]"
id="RegisterForm-email"
{% if form.email %}
value="{{ form.email }}"
{% endif %}
spellcheck="false"
autocapitalize="off"
autocomplete="email"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="RegisterForm-email-error"
{% endif %}
placeholder="{{ 'customer.register.email' | t }}"
>
<label for="RegisterForm-email">
{{ 'customer.register.email' | t }}
</label>
</div>
{%- if form.errors contains 'email' -%}
<span id="RegisterForm-email-error" class="form__message">
<svg aria-hidden="true" focusable="false">
<use href="#icon-error" />
</svg>
{{ form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email }}.
</span>
{%- endif -%}
<div class="field">
<input
type="password"
name="customer[password]"
id="RegisterForm-password"
aria-required="true"
{% if form.errors contains 'password' %}
aria-invalid="true"
aria-describedby="RegisterForm-password-error"
{% endif %}
placeholder="{{ 'customer.register.password' | t }}"
>
<label for="RegisterForm-password">
{{ 'customer.register.password' | t }}
</label>
</div>
{%- if form.errors contains 'password' -%}
<span id="RegisterForm-password-error" class="form__message">
<svg aria-hidden="true" focusable="false">
<use href="#icon-error" />
</svg>
{{ form.errors.translated_fields.password | capitalize }}
{{ form.errors.messages.password }}.
</span>
{%- endif -%}
<div class="field">
<input
type="date"
name="customer[note][birthday]"
id="RegisterForm-birthday"
aria-required="true"
{% if form.errors contains 'birthday' %}
aria-invalid="true"
aria-describedby="RegisterForm-birthday-error"
{% endif %}
placeholder="{{ 'customer.register.birthday' | t }}"
>
<label for="RegisterForm-birthday">
{{ 'customer.register.birthday' | t }}
</label>
</div>
<button>
{{ 'customer.register.submit' | t }}
</button>
{%- endform -%}
</div>
At the bottom is the birthday field. I tested, if I enter a bithday and hit submit I can see the birthday in the customer overview.
But I can also press submit if there is no date selected whatsoever.... I even used aria-required="true" like in email and password but that doesnt work either.
Probem 2: How can I add a validation to that date, that only people that are 18+ can register?
Here I didnt found any previous questions to that or documentation. Please let me know if you find something or have an idea how to solve that.
Thanks for the help.
Hey @CNSCHNEI!
I am not sure if this is the only problem or if there's something else going on as well, but the theme's standard form has a `novalidate` tag that needs to be removed: {%- form 'create_customer', novalidate: 'novalidate' -%}
For age validation, the best solution that I am aware of using plain HTML would be to set a static max value for the date, otherwise I believe you would need to use Javascript. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#additional_attributes
Another option entirely would be to use a registration app such as Helium Customer Fields which would allow you to create a completely custom registration form, including having a custom date field and being able to use the pre-built validation rules.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025