Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Conflict between the inputmask and formValidation components
Could you help me resolve a conflict between the inputmask and formValidation components? When I try to validate a field with inputmask, formValidation doesn't work.
exemplo:
<input class="form-control numberDecimal text-end" id="deliveryFee" name="deliveryFee" value="${this.sale.deliveryFee}"
data-inputmask="'alias': 'currency', 'radixPoint': ',', 'prefix': ''"/>
Replies (1)
Hi,
We will add this example in the next update here. In the meantime you can refer to the below example:
// Define form element
const form = document.getElementById("kt_docs_formvalidation_inputmask");
const maskOptions = {
"mask" : "(999) 999-9999"
};
// Phone
Inputmask(maskOptions).mask("#kt_inputmask");
var input = form.querySelector("[name=inputmask_input]");
input.addEventListener("change", function() {
// Revalidate it
validator.revalidateField("inputmask_input");
});
// Init form validation rules. For more info check the FormValidation plugin"s official documentation:
var validator = FormValidation.formValidation(
form,
{
fields: {
"inputmask_input": {
validators: {
notEmpty: {
message: "Inputmask input is required"
},
callback: {
message: "Invalid date",
callback: function (input) {
return Inputmask.isValid(input.value, maskOptions);
}
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "",
eleValidClass: ""
})
}
}
);
// Submit button handler
const submitButton = document.getElementById("kt_docs_formvalidation_inputmask_submit");
submitButton.addEventListener("click", function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log("validated!");
if (status == "Valid") {
// Show loading indication
submitButton.setAttribute("data-kt-indicator", "on");
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin"s official documentation:
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute("data-kt-indicator");
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});HTML:
<!--begin::Form-->
<form 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:</label>
<!--end::Label-->
<!--begin::Input-->
<input class="form-control form-control-solid" name="inputmask_input" placeholder="Pick a date" />
<!--end::Input-->
<div class="form-text">
Custom date format: <code>mm/dd/yyyy</code>
</div>
</div>
<!--end::Input group-->
<!--begin::Actions-->
<button 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-->Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
