0

Edit2 : 問題が見つかりました。実際には ajax 呼び出しにエラーがあり、私の愚かさのために、成功とエラーの両方のメソッドを実行できることに気付きませんでした (どちらか一方だと思っていました)。 )、エラーが発生したため、formComplete は毎回 false に設定されていました。

グローバル変数名を関数パラメーターとして使用しないことについて、あなたが与えた時間とヒントに感謝します。

編集：これが設定されているコードformCompleteです（console.log（）はプロセス全体で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 = contact form 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);
    });

検証関数'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、フォームが正しく入力された場合は true であることがわかりました。これは、php スクリプトがデータを含む .txt ファイルを作成するためです。false の場合、このファイルは作成されません。

これは、formCompleteoff の値を 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 を調べると、false になりましたが、理由がわかりません... writeMessage にformComplete渡す前に明示的に true に設定しても、まだ false です。

TLDR: 私がバカなところを教えてください :)

PS: 事前に構築されたコンタクト フォーム検証プラグインを使用できることはわかっていますが、自分で簡単なものを構築してみたかったのです。

4

1 に答える 1

0

問題は、writeMessage()AJAX リクエストのコールバック関数から呼び出しているため、インタープリターが実行時にグローバル変数を探していることです。とにかく、コールバック関数に渡すだけで済みます。呼び出しは次の場合にのみ実行さtrueれます-writeMessage()formCompletetrue

于 2012-06-10T22:10:34.627 に答える