Validation of registration form - using new form breaks validation

[CARPEDIEMGANG]

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, &quot;create_customer&quot;); 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>