Provide valuable, actionable feedback to your users with Pristine form validation

                      
                        <form class="valid-form flex flex-wrap flex-row -mx-4">
                          <div class="form-group flex-shrink max-w-full px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 px-4 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 pl-3 pr-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 px-4 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 px-4 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 px-4 w-full mb-4">
                            <label class="flex items-center">
                              <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-indigo-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none ltr:mr-3 rtl:ml-2" required>
                              <span>I agree to the Terms of Use</span>
                            </label>
                          </div>
                          <div class="form-group flex-shrink max-w-full px-4 w-full">
                            <button type="submit" class="py-2 px-4 inline-block text-center rounded leading-5 text-gray-100 bg-indigo-500 border border-indigo-500 hover:text-white hover:bg-indigo-600 hover:ring-0 hover:border-indigo-600 focus:bg-indigo-600 focus:border-indigo-600 focus:outline-none focus:ring-0">Register now</button>
                          </div>
                        </form>
                      
                    

Three part must included .form-valid, .form-group and required element

Demo config available in src/js/demo.js function myValidation();

More information about Pristine please read on here