Hi guys,
we are editing our registration form, we added a checkbox to confirm the customer read our policies, but using a new form broke the validation of the form fields (any error - some fields not filled in, email already used etc.)
Could you please help us? Or if you have a different solution for adding a checkbox to registraion form, that would also be fine.
Thank you very much.
This is our code:
<div id="shopify-section-template--19086656012620__main" class="shopify-section"><link href="//carpediemgang.cz/cdn/shop/t/1/assets/customer.css?v=34961046807264576181686498577" rel="stylesheet" type="text/css" media="all">
<style data-shopify="">.section-template--19086656012620__main-padding {
padding-top: 27px;
padding-bottom: 30px;
}
@media screen and (min-width: 750px) {
.section-template--19086656012620__main-padding {
padding-top: 36px;
padding-bottom: 40px;
}
}</style><div class="customer register section-template--19086656012620__main-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>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"></circle>
<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>
<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">
</path></symbol>
</svg>
<h1>
Create account
</h1><form method="post" action="/account" id="create_customer" accept-charset="UTF-8" data-login-with-shop-sign-up="true" novalidate="novalidate" onsubmit="window.Shopify.recaptchaV3.addToken(this, "create_customer"); return false;"><input type="hidden" name="form_type" value="create_customer"><input type="hidden" name="utf8" value="✓"><div class="field">
<input type="text" name="customer[first_name]" id="RegisterForm-FirstName" autocomplete="given-name" placeholder="First name">
<label for="RegisterForm-FirstName">
First name
</label>
</div>
<div class="field">
<input type="text" name="customer[last_name]" id="RegisterForm-LastName" autocomplete="family-name" placeholder="Last name">
<label for="RegisterForm-LastName">
Last name
</label>
</div>
<div class="field">
<input type="email" name="customer[email]" id="RegisterForm-email" spellcheck="false" autocapitalize="off" autocomplete="email" aria-required="true" placeholder="Email">
<label for="RegisterForm-email">
Email
</label>
</div><div class="field">
<input type="password" name="customer[password]" id="RegisterForm-password" aria-required="true" placeholder="Password">
<label for="RegisterForm-password">
Password
</label>
</div>
<div class = "checkbox">
<input type="checkbox" id="agree" required="true" onclick="checkPrivacyPolicy()">
<label for="agree">
Ich habe die <a href="/policies/privacy-policy">Datenschutzbestimmungen</a> gelesen und stimme ihnen hiermit zu.
</label>
</div>
<div class="contact__button">
<button id="RegisterForm-submit" disabled>
{{ 'customer.register.submit' | t }}
</button>
</div>
</form>
</div>
<script>
function checkPrivacyPolicy() {
var checkBox = document.getElementById('agree');
if (checkBox.checked == true){
document.getElementById('RegisterForm-submit').disabled = false;
} else {
document.getElementById('RegisterForm-submit').disabled = true;
}
}
</script>