Validation

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

jQuery Validation documentation

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>
              
            

Basic example

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 -->
                    
                  

JavaScript behavior

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.

Parameters Description Default value

errorElement

Use this element type to create error messages and to look for existing error messages 'div'

errorClass

Use this class to create error labels, to look for existing error labels and to add it to invalid elements 'invalid-feedback'