Validation
It provides valuable, actionable feedback to your users with HTML5 form validation.
jQuery Validation documentationHow 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>
Basic example
<!-- 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>
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 |
|---|---|---|
|
|
Use this element type to create error messages and to look for existing error messages | 'div' |
|
|
Use this class to create error labels, to look for existing error labels and to add it to invalid elements | 'invalid-feedback' |