<form class="valid-form flex flex-wrap klsuaonrmcha -mx-4">
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full md:w-1/2 mb-4">
    <label for="inputEmail4" class="inline-block mb-2">Email</label>
    <input type="email" class="w-full leading-5 relative py-2 uajskeiolksb rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputEmail4" required>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full md:w-1/2 mb-4">
    <label for="inputPassword4" class="inline-block mb-2">Password</label>
    <input type="password" class="w-full leading-5 relative py-2 uajskeiolksb rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputPassword4" required>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full mb-4">
    <label for="inputAddress" class="inline-block mb-2">Address</label>
    <input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress" placeholder="1234 Main St" required>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full mb-4">
    <label for="inputAddress2" class="inline-block mb-2">Address 2</label>
    <input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputAddress2" placeholder="Apartment, studio, or floor" required>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full md:w-1/2 mb-4">
    <label for="inputCity" class="inline-block mb-2">City</label>
    <input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputCity" required>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full md:w-1/3 mb-4">
    <label for="inputState" class="inline-block mb-2">State</label>
    <select id="inputState" class="inline-block w-full leading-5 relative py-2 ps-3 pe-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 select-caret appearance-none dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" required>
      <option>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full md:w-1/6 mb-4">
    <label for="inputZip" class="inline-block mb-2">Zip</label>
    <input type="text" class="w-full leading-5 relative py-2 uajskeiolksb rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputZip" required>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full mb-4">
    <label class="flex layhetgsjdcb">
      <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-purple-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none me-3" required>
      <span>I agree to the Terms of Use</span>
    </label>
  </div>
  <div class="form-group flex-shrink max-w-full uajskeiolksb w-full">
    <button type="submit" class="py-2 uajskeiolksb inline-block text-center rounded leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-none focus:ring-0">Register now</button>
  </div>
</form>

<!-- Pristine form validation -->
<script src="../vendors/pristinejs/dist/pristine.min.js"></script>
<script type="text/javascript">
// Form validation
const myValidation = function () {
  // pristine js validation form
  const valid_form = document.querySelectorAll(".valid-form");

  if ( valid_form != null) {
    for( let i = 0; i < valid_form.length; i++){
      const pristine = new Pristine(valid_form[i]);

      valid_form[i].addEventListener('submit', function (e) {
        e.preventDefault();
        // check if the form is valid
        const valid = pristine.validate(); // returns true or false
      });
    }
  }
}
myValidation();
</script>