Mandatory Checkbox on Registration Page

Highlighted
New Member
1 0 0

Hi Folks,

 

Seeking some help as relative new to Shopify platform.   I have been able to get a mandatory checkbox to work on the cart page but I need to of my checkbox options to be mandatory on my registration page and can't get the code to work.

 

I have tried applying the recommendation for the cart page as per code below with changes for the registration page but just not working :(

 

Store is still in development so I have posted my customer/register.liquid current code below.   Any help or recommendation is greatly appreciated.

 

Thanks

 

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
  <label style="display:inline; float:none" for="agree">
    I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
  </label>
</p>
$(document).ready(function() {
    $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
      if ($('#agree').is(':checked')) {
        $(this).submit();
      }
      else {
        alert("You must agree with the terms and conditions of sales to check out.");
        return false;
      }
    });
  });

 customer/register.liquid

<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="{{ 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">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</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' %}
<span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
</span>
{%- endif -%}

<p style="float: none; text-align: left; clear: both; margin: 12px 0;">
<input style="float:none; vertical-align: left;" type="checkbox" id="CustomerFormAgeConsent" name="customer[note][AgeConsent]"
value="Yes – I confirm that I am over 18 years old" />
<label style="display:inline; float:none" for="CustomerForm">
Yes - I confirm that I am over 18 years old
</label></br>

 

<p style="float: none; text-align: left; clear: both; margin: 12px 0;">
<input style="float:none; vertical-align: left;" type="checkbox" id="CustomerFormPrivacyConsent" name="customer[note][PrivacyConsent]"
value="Yes – I confirm that I have read and consent to the Privacy Notice"/>
<label style="display:inline; float:none" for="CustomerForm">
I have read and understood the terms of this <strong><a href="//u-beauty-sg.myshopify.com/pages/privacy-notice">Privacy Notice </a> </strong> and consent to the processing of my Personal Data as described
</label></br>
</p>

<div>
<p style="float: none; text-align: left; clear: both; margin: 12px 0;">
<input style="float:none; vertical-align: left;" type="hidden" name="customer[accepts_marketing]" value="" />
<input type="checkbox" name="customer[accepts_marketing]"/>
Subscribe to stay updated with new products and offers from U-Beauty! <br>
</p>
</div>
</div>

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

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

0 Likes
Highlighted
Shopify Expert
1381 112 211

please share a store url 

0 Likes