Add a REQUIRED birthday field to the customer register

Technical Q&A

Topic summary

A user needs to add a mandatory birthday field to their customer registration form for age verification (18+ products) but faces two key issues:

Problem 1: Required field not working

  • The birthday input field isn’t enforcing required validation
  • User tried adding aria-required="true" like email/password fields, but customers can still submit without selecting a date
  • The birthday does save and display in customer overview when entered

Problem 2: Age validation needed

  • Need to restrict registration to users 18+ based on entered birthdate
  • No existing documentation or previous solutions found

Suggested solution:

  • Remove novalidate: 'novalidate' from the form tag, which disables HTML5 validation
  • For age verification: set a static max value on the date input (HTML approach) or use JavaScript for dynamic validation
  • Alternative: Use a dedicated registration app like Helium Customer Fields for complete custom form control with built-in validation rules

The discussion remains open regarding the most effective implementation approach.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

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:


  
  # 
    {{ 'customer.register.title' | t }}
  
  {%- form 'create_customer', novalidate: 'novalidate' -%}
    {%- if form.errors -%}
      ## 
        
        {{ 'templates.contact.form.error_heading' | t }}
      
      
        {%- for field in form.errors -%}
          - {%- if field == 'form' -%}
                {{ form.errors.messages[field] }}
              {%- else -%}
              
                  {{ form.errors.translated_fields[field] | capitalize }}
                  {{ form.errors.messages[field] }}
              
              {%- endif -%}
          
        {%- endfor -%}
      

    {%- endif -%}
    
      
      
    

    
      
      
    

    
      
      
    

    {%- if form.errors contains 'email' -%}
      
        
        {{ form.errors.translated_fields.email | capitalize }}
        {{ form.errors.messages.email }}.
      
    {%- endif -%}
    

      
      
    

    {%- if form.errors contains 'password' -%}
      
        
        {{ form.errors.translated_fields.password | capitalize }}
        {{ form.errors.messages.password }}.
      
    {%- endif -%}
    

      
      
    

    
  {%- endform -%}

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.

2

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.

1 Like