Validation

It provides valuable, actionable feedback to your users with HTML5 form validation.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="./node_modules/jquery-validation/dist/jquery.validate.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

              
                <script src="./assets/js/hs.validation.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF FORM VALIDATION
                    // =======================================================
                    $('.js-validate').each(function () {
                      var validation = $.HSCore.components.HSValidation.init($(this));
                    });
                  });
                </script>

Your name *

Your email address *

Subject *

Your Phone Number *

Company *

Country *

How can we help you? *

We'll get back to you in 1-2 business days.

                    
                      <!-- Contacts Form -->
                      <form class="js-validate">
                        <div class="row">
                          <!-- Input -->
                          <div class="col-sm-6 mb-6">
                            <div class="js-form-message">
                              <label class="input-label">
                                Your name
                                <span class="text-danger">*</span>
                              </label>

                              <input type="text" class="form-control" name="name" placeholder="Jeff Fisher" aria-label="Jeff Fisher" required
                                     data-msg="Please enter your name.">
                            </div>
                          </div>
                          <!-- End Input -->

                          <!-- Input -->
                          <div class="col-sm-6 mb-6">
                            <div class="js-form-message">
                              <label class="input-label">
                                Your email address
                                <span class="text-danger">*</span>
                              </label>

                              <input type="email" class="form-control" name="email" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
                                     data-msg="Please enter a valid email address.">
                            </div>
                          </div>
                          <!-- End Input -->

                          <div class="w-100"></div>

                          <!-- Input -->
                          <div class="col-sm-6 mb-6">
                            <div class="js-form-message">
                              <label class="input-label">
                                Subject
                                <span class="text-danger">*</span>
                              </label>

                              <input type="text" class="form-control" name="subject" placeholder="Web design" aria-label="Web design" required
                                     data-msg="Please enter a subject.">
                            </div>
                          </div>
                          <!-- End Input -->

                          <!-- Input -->
                          <div class="col-sm-6 mb-6">
                            <div class="js-form-message">
                              <label class="input-label">
                                Your Phone Number
                                <span class="text-danger">*</span>
                              </label>

                              <input type="number" class="form-control" name="phone" placeholder="1-800-643-4500" aria-label="1-800-643-4500" required
                                     data-msg="Please enter a valid phone number.">
                            </div>
                          </div>
                          <!-- End Input -->
                        </div>

                        <!-- Input -->
                        <div class="js-form-message mb-6">
                          <label class="input-label">
                            How can we help you?
                            <span class="text-danger">*</span>
                          </label>

                          <div class="input-group">
                            <textarea class="form-control" rows="4" name="text" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                                      data-msg="Please enter a reason."></textarea>
                          </div>
                        </div>
                        <!-- End Input -->

                        <div class="text-center">
                          <button type="submit" class="btn btn-primary btn-wide transition-3d-hover mb-4">Submit</button>
                          <p class="small">We'll get back to you in 1-2 business days.</p>
                        </div>
                      </form>
                      <!-- End Contacts Form -->

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF VALIDATION
                    // =======================================================
                    $('.js-validate').each(function () {
                      var validation = $.HSCore.components.HSValidation.init($(this));
                    });

                    .HSCore.components.HSValidation.rules($('#amount'), 'add', {
                      minlength: 6
                    }); // $("#amount").rules("add", {minlength: 2});
                  });
                </script>

Attributes

Plugin methods are called using a wrapper:

              
                data-hs-validation-options='{
                 ...
              }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-validation-options='{}'. For more detailed or missing attributes/functions, see the official jQuery Validation documentation page.