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?

CodePudding user response：

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