Required field doesn't work in customers/register.liquid

Highlighted
Excursionist
33 0 2

Hi there, i hope you all doing fine,

 

So im 3 days searching for an answer, i googled it, and read all the threats about this in shopify community, and still cant get it worked. So im edetting a store of a client of mine. The problem is he want's to have all the fields required in the account registration, his hole store is ''locked'' so customers cant see his products without registration. All the settings under checkout in settings are checked on required. For example here is one of the codes:

<h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
          {% include 'form-status', form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

So what i already tried already 11 different ''requirements codes'' but none of them are working. Does anybody knows whats going on here? The strange part is, when i read other threats, everyone is complaining about this, and the shopify partners, or coworkers that have a answer that is working or there themes, it didnt work for the users. So i really dont understand where to find the problem, because i didnt even see a solution.

 

Here is the entire code of the page

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">

      <div class="form-vertical">

        <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
          {% include 'form-status', form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

          <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
          <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

          <label for="companyName">Bedrijfsnaam</label>
		  <input type="text" id="companyName" name="customer[note][Company]">
        
          <label for="telephoneNumber">Telefoonnummer</label>
		  <input type="text" id="telephoneNumber" name="customer[note][Telephone]">
        
        
          <label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
          <input
            type="email"
            name="customer[email]"
            id="{{ formId }}-email"
            class="{% if form.errors contains 'email' %} input--error{% endif %}"
            {% if form.email %} value="{{ form.email }}"{% endif %}
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            aria-required="true"
            {%- if form.errors contains 'email' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-email-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'email' -%}
            <span id="{{ formId }}-email-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
          {%- endif -%}

          <label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
          <input
            type="password"
            name="customer[password]"
            id="{{ formId }}-password"
            class="{% if form.errors contains 'password' %} input--error{% endif %}"
            aria-required="true"
            {%- if form.errors contains 'password' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-password-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'password' -%}
            <span id="{{ formId}}-password-error" class="input-error-message">{% include 'icon-error' %} {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
          {%- endif -%}

          <p class="text-center">
            <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
          </p>

        {% endform %}
      </div>
    </div>
  </div>
</div>

Please can someone help me out? 

0 Likes
Highlighted
Excursionist
33 0 2

No one that have a solution?

0 Likes
Highlighted
Shopify Partner
6087 892 2054

@beautyjay 

Thanks for remain forum 

Please share your site URL,
So I will check and provide a solution here.
 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
3 0 0

I have the same problem. I've tried every thread about this problem and none of them worked. If there is a definite answer please let me know.

0 Likes
Highlighted
Shopify Partner
1366 185 439

Remove the "novalidate: 'novalidate'" parameter from your liquid form and then put the required attribute in all the inputs you need to.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Excursionist
33 0 2

it still doesnt work, i made code like this 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">

      <div class="form-vertical">

        <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId %}
          {% include 'form-status', form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name" required>
0 Likes
Highlighted
Excursionist
33 0 2

My bad, its actually working!!!!!!!!!!!!!! thanks bro!

0 Likes
Highlighted
Shopify Partner
1366 185 439

No problem, glad it helped.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
2 Likes
Highlighted
Tourist
22 0 1

@Ninthony you helped me as well! I have been searching for this solution for hours!

 

Thank you for sharing

0 Likes