El siguiente JavaScript arroja un error Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute') y el registro de la consola de this.valid_form_submit_btn no está definido , pero se puede acceder a la misma variable fuera de esta función.
formulario-validación.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; } ¿Cómo paso la variable a la función onStatusChanged?
Debe usar la función de flecha en lugar de la función normal si no quiere perder this contexto.
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"); } }, })Gran explicación aquí