使用JQuery Ajax進行電子郵件驗證

Question

我一直在努力嘗試使用PHP和Javascript驗證帶有ajax的電子郵件。 我想要做的是檢查數據庫中是否已存在電子郵件，如果是，則顯示一條消息然后返回到表單，否則顯示成功消息並關閉表單。 問題是，如果電子郵件存在，它將顯示“錯誤消息”，然后顯示成功消息。 我已經檢查了類似的問題，並嘗試了其中的代碼，但沒有一個正確地應用於我的要求。 謝謝。

這是我得到的：

// JavaScript Document
$('#btnSubmit').click(function(){
    if(  validateForm() ){
        // code to submit all the info, display the success message and close the form
    }
    else return false;
});


// I created a function to validate all the fields in the form
function validateForm() {
    var firstName = $('#txtFirstName').val();
    var lastName = $('#txtLastName').val();
    var email = $('#txtMail').val();

    // to validate firstName and lastName I do it like this:
    if(!firstName || firstName.length === 0) {
        message = "All fields are mandatory\\nFirst Name is required";
        messageDialog("Warning", message, "warning", 2);
        return false;
    } 
    if( !firstName.match(letters) ) {
        message = "Invalid name";
        messageDialog("Warning", message, "warning", 2);
        return false;
    }
    // So far, no problem at all. But when I tried to validate email:
    else {
        // use ajax to check if a user has been previously registered
        // using this email
        $.ajax({
            url:"check_user.php",   // url that will use
            data:{                  // data that will be sent
                email:email
            },
            type:"POST",            // type of submision
            dataType:"text",        // what type of data we'll get back
            success:function(data)
            {    
                // if check_user returns a number different than 0
                // means that there's already a user registered with that email
                if(data > 0 ) {
                    message = "This email is registered already!";
                    messageDialog("Error", message, "error", 2);
                    return false;                   
                 }
                 else { return true;}
            }
        });

    }

    // if everything is right then return true so the submit function continue its execution
    return true;
}

Answer 1

您執行ajax請求，默認情況下是異步的，這意味着它在執行其余功能之前不會等待請求的響應。

因此，在您的情況下，一旦請求發出，它將返回true ，如函數結束所述。 然后，當您的ajax請求的響應返回時，它將觸發您的success函數，該函數將顯示錯誤消息。

您可以使用$.ajax函數的async參數執行類似的操作，以確保在繼續執行之前它將等待您的請求的響應。

function validateForm() {
    var firstName = $('#txtFirstName').val();
    var lastName = $('#txtLastName').val();
    var email = $('#txtMail').val();

    // to validate firstName and lastName I do it like this:
    if(!firstName || firstName.length === 0) {
        message = "All fields are mandatory\\nFirst Name is required";
        messageDialog("Warning", message, "warning", 2);
        return false;
    } 
    if( !firstName.match(letters) ) {
        message = "Invalid name";
        messageDialog("Warning", message, "warning", 2);
        return false;
    }
    // So far, no problem at all. But when I tried to validate email:
    else {
        // use ajax to check if a user has been previously registered
        // using this email
        var valid = false;
        $.ajax({
            url:"check_user.php",
            async: false,
            data:{                  // data that will be sent
                email:email
            },
            type:"POST",            // type of submision
            dataType:"text",        // what type of data we'll get back
            success:function(data)
            {    
                // if check_user returns a number different than 0
                // means that there's already a user registered with that email
                if(data == 0 ) {
                    valid = true;
                }
            }
        });
        if(!valid) {
             message = "This email is registered already!";
             messageDialog("Error", message, "error", 2);
             return false;
        } else { return true; }
    }
    }

Answer 2

我沒有看到任何成功消息，但我認為當電子郵件地址已經存在時，您的validate()函數返回true 。

這是因為您的ajax調用是異步的，並且在validate()函數完成時尚未完成。 除了您從匿名success函數返回的內容，不是從您的ajax調用返回的內容; 你甚至不使用ajax調用的返回值。

您可以使ajax調用同步並使用變量來設置它的返回值，也可以返回ajax調用的返回值，並在ajax調用完成后繼續處理。

Answer 3

在Ajax調用中，成功函數是異步的，這意味着如果它到達檢查您的電子郵件，您的函數將始終返回true。

要糾正這個問題，你必須從你的最后一個else和內部成功函數中刪除return true，調用一個函數來關閉你的表單，如下所示：

// JavaScript Document
$('#btnSubmit').click(function(){
    if(  validateForm() ){
        // code to submit all the info, display the success message and close the form
    }
    else return false;
});


// I created a function to validate all the fields in the form
function validateForm() {
    var firstName = $('#txtFirstName').val();
    var lastName = $('#txtLastName').val();
    var email = $('#txtMail').val();

    // to validate firstName and lastName I do it like this:
    if(!firstName || firstName.length === 0) {
        message = "All fields are mandatory\\nFirst Name is required";
        messageDialog("Warning", message, "warning", 2);
        return false;
    } 
    if( !firstName.match(letters) ) {
        message = "Invalid name";
        messageDialog("Warning", message, "warning", 2);
        return false;
    }
    // So far, no problem at all. But when I tried to validate email:
    else {
        // use ajax to check if a user has been previously registered
        // using this email
        $.ajax({
            url:"check_user.php",   // url that will use
            data:{                  // data that will be sent
                email:email
            },
            type:"POST",            // type of submision
            dataType:"text",        // what type of data we'll get back
            success:function(data)
            {    
                // if check_user returns a number different than 0
                // means that there's already a user registered with that email
                if(data > 0 ) {
                    message = "This email is registered already!";
                    messageDialog("Error", message, "error", 2);
                    return false;                   

                 } else {
                   // code to submit all the info, display the success message and close the form
                 yourfunctiontocloseyourform()
                 }
            }
        });
        return false;

    }

}