Form Validation
Provide valuable, actionable feedback to your users with HTML5 form validation.
Validation documentationHow 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() {
$.HSCore.components.HSValidation.init($(this));
});
});
</script>
Example
<!-- Form -->
<form class="js-validate">
<!-- Input -->
<div class="form-group row">
<label for="nameLabel" class="col-sm-3 col-form-label input-label">Your name</label>
<div class="col-sm-9 js-form-message">
<input type="text" class="form-control" id="nameLabel" name="name" placeholder="Jack Wayley" aria-label="Jack Wayley" required data-msg="Please enter your name.">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="form-group row">
<label for="emailLabel" class="col-sm-3 col-form-label input-label">Your email address</label>
<div class="col-sm-9 js-form-message">
<input type="email" class="form-control" id="emailLabel" 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="form-group row">
<label for="subjectLabel" class="col-sm-3 col-form-label input-label">Subject</label>
<div class="col-sm-9 js-form-message">
<input type="text" class="form-control" id="subjectLabel" name="subject" placeholder="Web design" aria-label="Web design" required data-msg="Please enter a subject.">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="form-group row">
<label for="phoneLabel" class="col-sm-3 col-form-label input-label">Your phone number</label>
<div class="col-sm-9 js-form-message">
<input type="number" class="form-control" id="phoneLabel" 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 class="form-group row">
<label for="textareaLabel" class="col-sm-3 col-form-label input-label">How can we help you?</label>
<div class="col-sm-9 js-form-message">
<textarea class="form-control" id="textareaLabel" rows="4" name="text" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required ></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- End Form -->
Validation types
<!-- For Validation -->
<form class="js-validate">
<!-- Input -->
<div class="row mb-3">
<label for="requiredLabel" class="col-md-3 col-form-label input-label text-md-right">Required</label>
<div class="col-md-6 js-form-message">
<input type="text" class="form-control" id="requiredLabel" name="form-control-required" placeholder="Placeholder" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="minlengthLabel" class="col-md-3 col-form-label input-label text-md-right">Min length</label>
<div class="col-md-6 js-form-message">
<input type="text" class="form-control" id="minlengthLabel" name="form-control-minlength" placeholder="Min 4 chars" minlength="4" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="maxlengthLabel" class="col-md-3 col-form-label input-label text-md-right">Max length</label>
<div class="col-md-6 js-form-message">
<input type="text" class="form-control" id="maxlengthLabel" name="form-control-maxlength" placeholder="Max 10 chars" maxlength="10" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="rangelengthLabel" class="col-md-3 col-form-label input-label text-md-right">Range length</label>
<div class="col-md-6 js-form-message">
<input type="text" class="form-control" id="rangelengthLabel" name="form-control-rangelength" placeholder="Text between 4 - 10 chars" minlength="4" maxlength="10" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="minValueLabel" class="col-md-3 col-form-label input-label text-md-right">Min value</label>
<div class="col-md-6 js-form-message">
<input type="number" class="form-control" id="minValueLabel" name="form-control-min-value" placeholder="Min 10 value" min="10" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="maxValueLabel" class="col-md-3 col-form-label input-label text-md-right">Max value</label>
<div class="col-md-6 js-form-message">
<input type="number" class="form-control" id="maxValueLabel" name="form-control-max-value" placeholder="Max 100 value" max="100" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="rangeValueLabel" class="col-md-3 col-form-label input-label text-md-right">Range value</label>
<div class="col-md-6 js-form-message">
<input type="number" class="form-control" id="rangeValueLabel" name="form-control-range-value" placeholder="Value between 10 - 100" min="10" max="100" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="password" class="col-md-3 col-form-label input-label text-md-right">Equal to</label>
<div class="col-md-3 mb-3 mb-md-0 js-form-message">
<input type="password" id="password" class="form-control" name="form-control-8" placeholder="Password" required>
</div>
<div class="col-md-3 js-form-message">
<input type="password" class="form-control" name="form-control-9" placeholder="Repeat password" required data-rule-equalTo="#password">
</div>
</div>
<!-- End Input -->
<!-- Checkboxes -->
<div class="row mb-3">
<label class="col-md-3 input-label text-md-right">Min check</label>
<div class="col-md-6 js-form-message">
<div class="d-flex">
<div class="custom-control custom-checkbox form-check form-check-inline">
<input type="checkbox" id="form-control-min-check-1" class="custom-control-input" name="minCheckboxes[]" required>
<label class="custom-control-label" for="form-control-min-check-1">Option 1</label>
</div>
<div class="custom-control custom-checkbox form-check form-check-inline">
<input type="checkbox" id="form-control-min-check-2" class="custom-control-input" name="minCheckboxes[]">
<label class="custom-control-label" for="form-control-min-check-2">Option 2</label>
</div>
<div class="custom-control custom-checkbox form-check form-check-inline">
<input type="checkbox" id="form-control-min-check-3" class="custom-control-input" name="minCheckboxes[]">
<label class="custom-control-label" for="form-control-min-check-3">Option 3</label>
</div>
</div>
<span class="form-text">Select minimum 2 options.</span>
</div>
</div>
<!-- End Checkboxes -->
<!-- Checkboxes -->
<div class="row mb-3">
<label class="col-md-3 input-label text-md-right">Max check</label>
<div class="col-md-6 js-form-message">
<div class="d-flex">
<div class="custom-control custom-checkbox form-check-inline">
<input type="checkbox" id="form-control-max-check-1" class="custom-control-input" name="maxCheckboxes[]" required>
<label class="custom-control-label" for="form-control-max-check-1">Option 1</label>
</div>
<div class="custom-control custom-checkbox form-check-inline">
<input type="checkbox" id="form-control-max-check-2" class="custom-control-input" name="maxCheckboxes[]">
<label class="custom-control-label" for="form-control-max-check-2">Option 2</label>
</div>
<div class="custom-control custom-checkbox form-check-inline">
<input type="checkbox" id="form-control-max-check-3" class="custom-control-input" name="maxCheckboxes[]">
<label class="custom-control-label" for="form-control-max-check-3">Option 3</label>
</div>
</div>
<span class="form-text">Select maximum 2 options.</span>
</div>
</div>
<!-- End Checkboxes -->
<!-- Switch -->
<div class="row mb-3">
<label class="col-md-3 input-label text-md-right">Switch</label>
<div class="col-md-6 js-form-message">
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center" for="customSwitch">
<input type="checkbox" class="toggle-switch-input" id="customSwitch">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Enable mode</span>
</span>
</label>
<!-- End Checkbox Switch -->
</div>
</div>
<!-- End Switch -->
<!-- Input -->
<div class="row mb-3">
<label for="emailAddressLabel" class="col-md-3 col-form-label input-label text-md-right">E-Mail address</label>
<div class="col-md-6 js-form-message">
<input type="email" class="form-control" id="emailAddressLabel" name="form-control-email" placeholder="Email address" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="urlLabel" class="col-md-3 col-form-label input-label text-md-right">URL</label>
<div class="col-md-6 js-form-message">
<input type="url" class="form-control" id="urlLabel" name="form-control-url" placeholder="http://htmlstream.com" required>
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="row mb-3">
<label for="digitsLabel" class="col-md-3 col-form-label input-label text-md-right">Digits</label>
<div class="col-md-6 js-form-message">
<input type="text" class="form-control" id="digitsLabel" name="form-control-digits" placeholder="Digits" required data-rule-digits="true">
</div>
</div>
<!-- End Input -->
<!-- Textarea -->
<div class="row mb-3">
<label for="textareaValidationLabel" class="col-md-3 col-form-label input-label text-md-right">Textarea</label>
<div class="col-md-6 js-form-message">
<textarea class="form-control" id="textareaValidationLabel" name="form-control-textarea" required></textarea>
</div>
</div>
<!-- End Textarea -->
<!-- Button Submit -->
<div class="row mb-3">
<div class="col-md-6 offset-md-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<!-- End Button Submit -->
</form>
<!-- End For Validation -->
Advanced types
<!-- Form Validation -->
<form class="js-validate">
<!-- Select2 -->
<div class="row mb-3">
<label class="col-md-3 col-form-label input-label text-md-right">Select2</label>
<div class="col-md-6 js-form-message">
<select class="js-select2-custom" name="form-control-select2" required
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"placeholder": "Select member"
}'>
<option></option>
<option value="1">Bruce Maynard</option>
<option value="2">Hollis Clark</option>
<option value="3">Lester Howard</option>
<option value="4">George Marino</option>
<option value="5">Tyler Johnson</option>
<option value="6">Jennifer Craig</option>
<option value="7">Martha Barnwell</option>
<option value="8">Florencia Todd</option>
<option value="9">Henry Sloan</option>
<option value="10">Abigail Watson</option>
</select>
</div>
</div>
<!-- End Select2 -->
<!-- Flatpickr -->
<div class="row mb-3">
<label class="col-md-3 col-form-label input-label text-md-right">Flatpickr</label>
<div class="col-md-6 js-form-message">
<input type="text" class="js-flatpickr form-control flatpickr-custom w-100" name="form-control-flatpickr" placeholder="Select dates" required
data-hs-flatpickr-options='{
"dateFormat": "d/m/Y"
}'>
</div>
</div>
<!-- End Flatpickr -->
<!-- Input Masked -->
<div class="row mb-3">
<label class="col-md-3 col-form-label input-label text-md-right">Input masked</label>
<div class="col-md-6 js-form-message">
<input type="text" id="input-masked" name="input-masked" class="js-masked-input form-control" placeholder="+x(xxx)xxx-xx-xx" required
data-hs-mask-options='{
"template": "+0(000)000-00-00"
}'>
</div>
</div>
<!-- End Input Masked -->
<!-- Button Submit -->
<div class="row mb-3">
<div class="col-md-6 offset-md-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<!-- End Button Submit -->
</form>
<!-- End Form Validation -->
<link rel="stylesheet" href="../node_modules/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="../node_modules/flatpickr/dist/flatpickr.min.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/select2/dist/js/select2.full.min.js"></script>
<script src="../node_modules/flatpickr/dist/flatpickr.min.js"></script>
<script src="../node_modules/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.select2.js"></script>
<script src="../assets/js/hs.flatpickr.js"></script>
<script src="../assets/js/hs.mask.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of select2
$('.js-select2-custom').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
// initialization of flatpickr
$('.js-flatpickr').each(function () {
$.HSCore.components.HSFlatpickr.init($(this));
});
// initialization of Input Masks
$('.js-masked-input').each(function () {
$.HSCore.components.HSMask.init($(this));
});
});
</script>
Modal example
Validation
<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Button Trigger Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Validation</h5>
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<i class="tio-clear tio-lg" aria-hidden="true"></i>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Form -->
<form class="js-validate">
<!-- Input -->
<div class="form-group">
<label for="nameModalEgLabel" class="input-label">Your name</label>
<div class="js-form-message">
<input type="text" class="form-control" id="nameModalEgLabel" name="nameModalEg" placeholder="Jack Wayley" aria-label="Jack Wayley" required data-msg="Please enter your name.">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="form-group">
<label for="emailModalEgLabel" class="input-label">Your email address</label>
<div class="js-form-message">
<input type="email" class="form-control" id="emailModalEgLabel" name="emailModalEg" 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="form-group">
<label for="subjectModalEgLabel" class="input-label">Subject</label>
<div class="js-form-message">
<input type="text" class="form-control" id="subjectModalEgLabel" name="subjectModalEg" placeholder="Web design" aria-label="Web design" required data-msg="Please enter a subject.">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="form-group">
<label for="phoneModalEgLabel" class="input-label">Your phone number</label>
<div class="js-form-message">
<input type="number" class="form-control" id="phoneModalEgLabel" name="phoneModalEg" 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 class="form-group">
<label for="textareaModalEgLabel" class="input-label">How can we help you?</label>
<div class="js-form-message">
<textarea class="form-control" id="textareaModalEgLabel" rows="4" name="textModalEg" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required ></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description |
|---|---|
data-validate-state |
By deafult .is-valid and .is-invalid classes added to <input> or <select> tags. Adding this attribute to .js-form-message class or inside .js-form-message class children element, will determine where the .is-valid and .is-invalid classes will be added. |