Utilities 1

<div class="blocks-utilities-01 wrapper bg-color-ui-01">
  <div class="grid-container">
    <!-- form -->
    <form class="grid-x" id="blocks-utilities-01-form">
      <div class="large-4 medium-6 small-12 utilities-form-holder">

        <div class="spacer x-large"></div>
        <h2 class="spacer x-large text-center">Create an Account</h2>

        <div class="grid-x grid-padding-x">
          <div class="large-12 medium-12 small-12 cell">
            <ins-input validate id="email" field="email" label="Email*" data-test="" name="email" value=""
              placeholder="Email" error-message="Email is required">
            </ins-input>
          </div>

          <div class="large-12 medium-12 small-12 cell">
            <ins-input validate id="password" field="password" label="Password*" data-test="" name="password" value=""
              placeholder="Password"
              error-message="Password must Contain between 8–36 characters, at least 1 upper-case letter and at least 1 number">
            </ins-input>
          </div>

          <div class="large-12 medium-12 small-12 cell">
            <ins-input validate id="first-name" label="First Name*" data-test="" name="first-name" value=""
              placeholder="First name" error-message="First Name is required">
            </ins-input>
          </div>

          <div class="large-12 medium-12 small-12 cell">
            <ins-input validate id="last-name" label="Last Name*" data-test="" name="last-name" value=""
              placeholder="Last name" error-message="Last Name is required">
            </ins-input>
          </div>

          <div class="large-12 medium-12 small-12 cell">
            <ins-input-tel id="phone-number-field" label="Mobile Phone" data-test="" phonenum-value=""
              phonenum-placeholder="Mobile Phone" no-areacode>
            </ins-input-tel>
          </div>

          <div class="large-12 medium-12 small-12 cell">
            <p>
              By creating an account, you agree to our <a>Privacy Policy</a> and <a>Terms of Use</a>
            </p>
            <div class="spacer x-large"></div>
          </div>

          <div class="large-12 medium-12 small-12 cell text-center">
            <ins-button id="blocks-utilities-01-submit-btn" label="CREATE ACCOUNT" solid color="blue" type="submit"
              size="large" data-test="contact-us-button-submit"></ins-button>
            <div class="spacer x-large"></div>
          </div>

          <div class="large-12 medium-12 small-12 cell text-center">
            <p>
              Already have an account? <a>Sign In</a>
            </p>
          </div>
        </div>
      </div>
    </form>
    <!-- /form -->
  </div>
  <div class="spacer x-large"></div>
</div>

.blocks-utilities-01 .ins-form-field-wrap.is-invalid .ins-form-error {
  color: var(--color-error, #FF3366);
  font-family: var(--font-family-03, sans-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.blocks-utilities-01 button[type='submit'] {
  width: 100%;
}

var blocksUtilities01Form = document.getElementById('blocks-utilities-01-form');
  var blocksUtilities01SubmitBtn = document.getElementById('blocks-utilities-01-submit-btn');
  blocksUtilities01Form.addEventListener('submit', validateForm);
  
  async function validateForm(event) {
    console.log("validate");
    event.preventDefault();
    // submitBtn.loading = true;
    
    if(await WebBlocks.validation.validateForm(blocksUtilities01Form)) {
        // form.submit();
        console.log("form submit");
        blocksUtilities01SubmitBtn.loading = true;
        return true;
    } else {
        blocksUtilities01SubmitBtn.loading = false;
        return false;
    }
  }