The following JavaScript is giving throwing an error Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute') and console log of this.valid_form_submit_btn is undefined but the same variable outside of this function is accessible.
form-validation.js
"use strict";
//validation script
class MedValidation {
constructor(valid_form_id) {
this.valid_form = document.getElementById(valid_form_id);
this.valid_form_submit_btn = this.valid_form.querySelector('[type="submit"]');
}
init() {
this.valid_fv = FormValidation.formValidation(
this.valid_form, {
plugins: {
trigger: new FormValidation.plugins.Trigger({delay:0.5}),
submitButton: new FormValidation.plugins.SubmitButton(),
bootstrap: new FormValidation.plugins.Bootstrap(),
icon: new FormValidation.plugins.Icon({
valid: "fa fa-check",
invalid: "fa fa-times",
validating: "fa fa-refresh",
}),
fieldStatus: new FormValidation.plugins.FieldStatus({
onStatusChanged: function (areFieldsValid) {
console.log("test fieldStatus");
console.log(areFieldsValid);
console.log(this.valid_form_submit_btn);
if (areFieldsValid) {
// Enable the submit button
// so user has a chance to submit the form again
this.valid_form_submit_btn.removeAttribute("disabled");
} else {
// Disable the submit button
this.valid_form_submit_btn.setAttribute("disabled", "disabled");
}
},
}),
},
});
}
}
// webpack support
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
module.exports = MedValidation;
}
How do I pass variable to onStatusChanged function?
You must use arrow function instead of regular function if you don't want lose this context.
fieldStatus: new FormValidation.plugins.FieldStatus({
onStatusChanged: (areFieldsValid) => { // this
console.log("test fieldStatus");
console.log(areFieldsValid);
console.log(this.valid_form_submit_btn);
if (areFieldsValid) {
// Enable the submit button
// so user has a chance to submit the form again
this.valid_form_submit_btn.removeAttribute("disabled"); // and now `this` context is MedValidation class
} else {
// Disable the submit button
this.valid_form_submit_btn.setAttribute("disabled", "disabled");
}
},
})
Great explanation here