How to reinitialize form validation -- Craft
How do I reinitialize form validation after loading modal body from ajax? Example: AddTarget modal.
Replies (3)
Hi,
Can you try to use resetForm API method by referring to the official form validation plugin documentation here.
Regards.
I have no idea if I'm even doing this correct as I'm new to JS/jQuery but here is my function, any pointers? Still getting form not validated errors on submission.
function viewApptStatus(apptId) {
// AJAX request
$.ajax({
url: 'update/processLoad.php?type=1',
type: 'post',
data: {apptId: apptId},
success: function(response){
// Add response in Modal body
$('#edit-appt-modal').html(response);
$("#apptAgent").select2();
$("#apptType1").select2();
$("#apptStart").flatpickr({
enableTime: !0,
dateFormat: "Y-m-d H:i:S"
}),
$("#apptEnd").flatpickr({
enableTime: !0,
dateFormat: "Y-m-d H:i:S"
}),
o = document.querySelector("#kt_modal_new_appointment_form"),
n = FormValidation.formValidation(o, {
fields: {
apptAgent: {
validators: {
notEmpty: {
message: "Agent is required"
}
}
},
apptType1: {
validators: {
notEmpty: {
message: "Type is required"
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger,
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "",
eleValidClass: ""
})
}
}),
n.resetForm(),
$("#apptAgent").select2().on("change", (function() {
n.revalidateField("apptAgent")
})),
$("#apptType1").select2().on("change", (function() {
n.revalidateField("apptType1")
})),
$('#kt_modal_new_appointment').modal('show');
}
});
}
Hi,
Since we are not able to debug your code we can not confirm if it works as you expected.
However please make sure that you execute your code on document ready event when all core js libraries are loaded and available:
// On document ready
KTUtil.onDOMContentLoaded(function () {
// put your code here and call it at the bottom
// of the page after all core js dependacies
});Regards.
