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="../../assets/vendor/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.