FormValidation JavaScript 变量范围和可访问性答案

【问题标题】：FormValidation JavaScript variable scope and accessibilityFormValidation JavaScript 变量范围和可访问性
【发布时间】：2021-11-13 22:08:51
【问题描述】：

以下 JavaScript 会抛出错误 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute') 并且 this.valid_form_submit_btn 的控制台日志是 undefined 但此函数之外的相同变量是可访问的。

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;
}

如何将变量传递给 onStatusChanged 函数？

【问题讨论】：

标签： javascript jquery validation formvalidation-plugin formvalidation.io

【解决方案1】：

如果您不想丢失this 上下文，则必须使用箭头函数而不是常规函数。

     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");
                        }
                    },
                })

很好的解释here

【讨论】：