Re Validation form (Metronic 8.2- html)
Hello,
How can the form validation function be called again in Metronic 8.2? Because when an item in the form is removed or added by hide() and show(), the validation on these items does not work correctly.
When an item is hidden, the class "fv-row" is removed from the div.
When an item is show, the class "fv-row" is added to div.
Despite what I have mentioned, the form validation still does not work correctly on the new changes and seems to require being called again.
I would appreciate your guidance. Thank you!
Replies (4)
I faced a similar issue with Metronic 8.2 when working with dynamic form fields. The validation didn’t update when I added or removed inputs. What worked for me was to fully reset the form validation and then apply it again from scratch. That way, all the changes were picked up properly.
formValidationInstance.destroy();
formValidationInstance = FormValidation.formValidation(formElement, options);
Doing this made the validation work smoothly again. It’s kind of like restarting a level in a game when things get stuck, reminds me of how I sometimes restart my choices while playing bit life apk.
I ran into the same issue with Metronic 8.2! When dynamically adding or removing fields, the validation doesn't always update properly. What worked for me was reinitializing FormValidation after modifying the form:
formValidationInstance.destroy();
formValidationInstance = FormValidation.formValidation(formElement, options);This ensures newly shown fields are validated correctly. It reminds me of tweaking character choices in BitLife Mod APK—sometimes you need a reset to make everything work as expected!
For kids, there's the online game bitlife Life Simulator, which works on Samsung, iPhone, iPad, and other Android and Apple devices.
Hi,
Please try to refer to the official docs of the plugin https://formvalidation.io/ and refer to the below code:
// Assume `form` is the form element, and `validator` is the FormValidation instance
const form = document.querySelector('#yourFormId');
const validator = FormValidation.formValidation(form, {
fields: {
// Define your fields and their validation rules
fieldName: {
validators: {
notEmpty: {
message: 'This field is required',
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
},
});
// When an element is shown
function onElementShown() {
// Update FormValidation to revalidate the shown element
validator.addField('fieldName', {
validators: {
notEmpty: {
message: 'This field is required',
},
},
});
}
// When an element is hidden
function onElementHidden() {
// Update FormValidation to ignore the hidden element
validator.disableValidator('fieldName');
}
Regards, Sean
