FormValidation JavaScript 变量范围和可访问性

Question

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

形式-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 函数？

Answer 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

FormValidation JavaScript 变量范围和可访问性

FormValidation JavaScript variable scope and accessibility

javascript

validation

jquery

formvalidation-plugin

formvalidation.io