How to reinitialize form validation -- Craft

How do I reinitialize form validation after loading modal body from ajax? Example: AddTarget modal.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(