input
types within a form
that has FormValidation attached to it.
name
attribute to bind the input field for validation.
// Define form element
const form = document.getElementById('kt_docs_formvalidation_daterangepicker');
// Init daterangepicker --- for more info, please visit: https://www.daterangepicker.com/
element.daterangepicker({
autoUpdateInput: false,
});
element.on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
element.on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'daterangepicker_input': {
validators: {
notEmpty: {
message: 'Date range input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
<!--begin::Form-->
<form id="kt_docs_formvalidation_daterangepicker" class="form" action="#" autocomplete="off">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2">Date Range Picker Input</label>
<!--end::Label-->
<!--begin::Input-->
<input class="form-control form-control-solid" name="daterangepicker_input" placeholder="Pick date range" id="kt_daterangepicker" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_daterangepicker_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>
<!--end::Form-->
// Define form element
const form = document.getElementById('kt_docs_formvalidation_flatpickr');
// Init flatpickr --- for more info, please visit: https://flatpickr.js.org/
$("#kt_flatpickr").flatpickr();
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'flatpickr_input': {
validators: {
date: {
format: 'YYYY-MM-DD',
message: 'The value is not a valid date',
},
notEmpty: {
message: 'Flatpickr input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
<!--begin::Form-->
<form id="kt_docs_formvalidation_flatpickr" class="form" action="#" autocomplete="off">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2">Flatpickr Input</label>
<!--end::Label-->
<!--begin::Input-->
<input class="form-control" name="flatpickr_input" placeholder="Pick a date" id="kt_flatpickr" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_flatpickr_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>
<!--end::Form-->
// Define form element
const form = document.getElementById('kt_docs_formvalidation_image_input');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'avatar': {
validators: {
notEmpty: {
message: 'Please select an image'
},
file: {
extension: 'jpg,jpeg,png',
type: 'image/jpeg,image/png',
message: 'The selected file is not valid'
},
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
<!--begin::Form-->
<form id="kt_docs_formvalidation_image_input" class="form" action="#" autocomplete="off">
<!--begin::Input group-->
<div class="fv-row mb-7">
<!--begin::Label-->
<label class="d-block fw-semibold fs-6 mb-5">Image Input</label>
<!--end::Label-->
<!--begin::Image input-->
<div class="image-input image-input-outline image-input-empty" data-kt-image-input="true" style="background-image: url('assets/media/svg/avatars/blank.svg')">
<!--begin::Preview existing avatar-->
<div class="image-input-wrapper w-125px h-125px"></div>
<!--end::Preview existing avatar-->
<!--begin::Label-->
<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
<i class="bi bi-pencil-fill fs-7"></i>
<!--begin::Inputs-->
<input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
<input type="hidden" name="avatar_remove" />
<!--end::Inputs-->
</label>
<!--end::Label-->
<!--begin::Cancel-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
<i class="bi bi-x fs-2"></i>
</span>
<!--end::Cancel-->
<!--begin::Remove-->
<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
<i class="bi bi-x fs-2"></i>
</span>
<!--end::Remove-->
</div>
<!--end::Image input-->
<!--begin::Hint-->
<div class="form-text">Allowed file types: png, jpg, jpeg.</div>
<!--end::Hint-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_image_input_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>
<!--end::Form-->
// Define form element
const form = document.getElementById('kt_docs_formvalidation_password');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'current_password': {
validators: {
notEmpty: {
message: 'Current password is required'
}
}
},
'new_password': {
validators: {
notEmpty: {
message: 'The password is required'
},
callback: {
message: 'Please enter valid password',
callback: function (input) {
if (input.value.length > 0) {
return validatePassword();
}
}
}
}
},
'confirm_password': {
validators: {
notEmpty: {
message: 'The password confirmation is required'
},
identical: {
compare: function () {
return form.querySelector('[name="new_password"]').value;
},
message: 'The password and its confirm are not the same'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
<!--begin::Form-->
<form id="kt_docs_formvalidation_password" class="form" action="#" autocomplete="off">
<!--begin::Input group--->
<div class="fv-row mb-10">
<label class="required form-label fs-6 mb-2">Current Password</label>
<input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="current_password" autocomplete="off" />
</div>
<!--end::Input group--->
<!--begin::Input group-->
<div class="mb-10 fv-row" data-kt-password-meter="true">
<!--begin::Wrapper-->
<div class="mb-1">
<!--begin::Label-->
<label class="form-label fw-semibold fs-6 mb-2 required">
New Password
</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative mb-3">
<input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="new_password" autocomplete="off" />
<span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
<i class="bi bi-eye-slash fs-2"></i>
<i class="bi bi-eye fs-2 d-none"></i>
</span>
</div>
<!--end::Input wrapper-->
<!--begin::Meter-->
<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
</div>
<!--end::Meter-->
</div>
<!--end::Wrapper-->
<!--begin::Hint-->
<div class="text-muted">
Use 8 or more characters with a mix of letters, numbers & symbols.
</div>
<!--end::Hint-->
</div>
<!--end::Input group--->
<!--begin::Input group--->
<div class="fv-row mb-10">
<label class="form-label fw-semibold fs-6 mb-2 required">Confirm New Password</label>
<input class="form-control form-control-lg form-control-solid" type="password" placeholder="" name="confirm_password" autocomplete="off" />
</div>
<!--end::Input group--->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_password_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>
<!--end::Form-->
// Define form element
const form = document.getElementById('kt_docs_formvalidation_select2');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'select2_input': {
validators: {
notEmpty: {
message: 'Select2 input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate Select2 input. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="select2_input"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('select2_input');
});
<!--begin::Form-->
<form id="kt_docs_formvalidation_select2" class="form" action="#" autocomplete="off">
<!--begin::Input group--->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required form-label fs-6 mb-2">Select2 Input</label>
<!--end::Label-->
<!--begin::Select2-->
<select class="form-select" name="select2_input" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<!--begin::Select2-->
</div>
<!--end::Input group--->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_select2_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>
<!--end::Form-->
// Define form element
const form = document.getElementById('kt_docs_formvalidation_tagify');
// Init tagify --- for more info, please visit: https://yaireo.github.io/tagify/
var tags = new Tagify(document.querySelector("#kt_tagify"), {
whitelist: ["Tag 1", "Tag 2", "Tag 3", "Tag 4", "Tag 5", "Tag 6", "Tag 7", "Tag 8", "Tag 9", "Tag 10", "Tag 11", "Tag 12"],
maxTags: 6,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
tags.on("change", function(){
// Revalidate the field when an option is chosen
validator.revalidateField('tagify_input');
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'tagify_input': {
validators: {
notEmpty: {
message: 'Tagify input is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
<!--begin::Form-->
<form id="kt_docs_formvalidation_tagify" class="form" action="#" autocomplete="off">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2">Tagify Input</label>
<!--end::Label-->
<!--begin::Input-->
<input class="form-control" name="tagify_input" value="" id="kt_tagify" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_tagify_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>
<!--end::Form-->
// Define form element
const form = document.getElementById("kt_docs_formvalidation_datepicker");
// Tempus Dominus Bootstrap Datepicker --- for more info, please visit: https://getdatepicker.com/
tempusDominus.extend(tempusDominus.plugins.customDateFormat);
new tempusDominus.TempusDominus(document.getElementById("kt_datepicker"), {
localization: {
locale: "en",
format: "dd/MM/yyyy, hh:mm T", // More info: https://getdatepicker.com/6/options/localization.html
}
});
// Init form validation rules. For more info check the FormValidation plugin"s official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
"datepicker_input": {
validators: {
notEmpty: {
message: "Flatpickr input is required"
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "",
eleValidClass: ""
})
}
}
);
var input = form.querySelector("[name=datepicker_input]");
input.addEventListener("change", function() {
// Revalidate it
validator.revalidateField("datepicker_input");
});
<form id="kt_docs_formvalidation_datepicker" class="form" action="#" autocomplete="off">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2">Datepicker Input</label>
<!--end::Label-->
<!--begin::Input-->
<input class="form-control" name="datepicker_input" placeholder="Pick a date" id="kt_datepicker" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<button id="kt_docs_formvalidation_datepicker_submit" type="submit" class="btn btn-primary">
<span class="indicator-label">
Validation Form
</span>
<span class="indicator-progress">
Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
<!--end::Actions-->
</form>