Question

Edit2 ：是的，发现问题，ajax调用实际上有一个错误，而且由于我的愚蠢，我没有意识到这两种方法 - 成功和错误都可以运行（我认为它是一个或另一个），因此每次都将formComplete设置为false，因为出现了错误。

欣赏你给予的时间＆amp;提示不使用全局变量名作为函数参数。

修改：以下是设置formComplete的代码（console.log（）＆＃39}，以便在整个过程中检查formComplete）：

validate: function(field) {
            if(!field.val()) {
                formComplete = false;
                // formComplete is false here
                console.log(formComplete);
            }
            else {
                if(field.attr('name') === 'queryEmail') {
                    // Validate the email
                    if(DMOFFAT.helper.validateEmail(field.val()) === true){
                        // formComplete is either true or false here, depending on the last validation carried out
                        console.log(formComplete);
                        formComplete = true;
                        // formComplete is true here
                        console.log(formComplete);
                    }
                    else {
                        formComplete = false;
                        // formComplete is false here
                        console.log(formComplete);
                    }
                }
                else {
                    formComplete = true;
                    // formComplete is true here
                    console.log(formComplete);
                }

            }
        },

问题：为什么这个变量（formComplete）从true变为false？

我已经为联系表单编写了一些基本的表单验证，这是我如何完成的：

定义了这样的字段：

var queryTypeField = $('#queryType'),
    queryMessageField = $('#queryMessage'),
    queryEmailField = $('#queryEmail'),
    queryNameField = $('#queryName'),
    submitButton = $('#submit');

为这些添加一些事件处理程序（FWIW，DMOFFAT变量只是一个包含代码的不同模块的对象，例如contactForm =联系表单javascript等）：

    queryMessageField.on('blur', function() {
       DMOFFAT.contactForm.validate(queryMessageField);
    });

    queryNameField.on('blur', function() {
       DMOFFAT.contactForm.validate(queryNameField);
    });

    queryEmailField.on('blur', function() {
       DMOFFAT.contactForm.validate(queryEmailField);
    });       

    submitButton.on('click', function(evt) {
        evt.preventDefault();
        console.log('Click');
        console.log(formComplete);
        DMOFFAT.contactForm.send(formComplete);
    });

validate函数只是将'formComplete'设置为true或false，具体取决于字段是否有效。

当我的字段全部填写正确时，formComplete = true。

从上面代码的最后一行可以看出，我将formComplete（这是真的）传递给了我的send函数。我的send函数只是检查formComplete的值，并将数据发送到php脚本，或者输出错误，这里是代码：

        send: function(formComplete) {
        // This is true when the form is filled in correctly
        console.log('In send formComplete is...' + formComplete);
        if(formComplete === true) {
            // Extract form values
            formData['queryMessage'] = queryMessage.value;
            formData['queryType'] = queryType.value;
            formData['queryName'] = queryName.value;
            formData['queryEmail'] = queryEmail.value;
           $.ajax({
                type: 'POST',
                async: true,
                url: '....',
                dataType: 'json',
                data: formData,
                success: function(data, status, xhr) {
                    DMOFFAT.contactForm.writeMessage(formComplete);
                },
                error: function(xhr, status, err) {
                    DMOFFAT.contactForm.writeMessage(formComplete);
                }
            });

        }
        else {
            this.writeMessage(formComplete);
        }

现在，我知道当表单填写正确时formComplete为真，因为我的php脚本会创建一个带有数据的.txt文件，如果它是假的，那么这个文件就不会是创建

这意味着我们将formComplete的值发送到writeMessage，它只是向页面写出一些HTML来显示提交是否成功，这里是代码：

 // Disgusting spaghetti code
    writeMessage: function(formComplete) {
        // This is false now...
        console.log('In writeMessage formComplete is...' + formComplete);
        if(formComplete === true) {
            contactFormElement.html('<div class="success ui-message cf-message"><p><strong>Thank you</strong> for your query, we\'ll get back to you as soon as we can.</p></div>');
        }
        else {
            // Check if there's already an error, otherwise many will appear
            if(errorElement === '') {
                errorElement = '<div class="error ui-message cf-message"><p>' + this.config.errorMsg + '</p></div>';
                contactFormElement.prepend(errorElement);   
            }
        }
    }

formComplete本身的定义如下：

var formComplete;

当我在writeMessage的第一行检查formComplete时，它现在是假的，但是我找不到原因...即使我在通过之前明确地将formComplete设置为true写作消息，它仍然是假的。

TLDR：请告诉我，我在哪里愚蠢。）

PS：我知道我可以使用预先构建的联系表单验证插件，但我想尝试自己构建一些简单的东西。

Answer 1

问题是，您正在从AJAX请求的回调函数中调用writeMessage()，因此解释器正在寻找执行时的全局变量。无论如何，您只需在回调函数中将true传递给writeMessage()，因为仅当formComplete为true时才会执行调用 -

为什么这个变量在传递函数时会发生变化？

1 个答案: