0

大家好，请帮我解决我的问题。实际上，我正在尝试使用 javascript 在表单上验证我的电子邮件字段并发布 ajax 请求以检查该电子邮件是否存在，但我的 javascript 函数不会等到 ajax 响应并且每次它返回 false 时。当电子邮件不存在时，我想返回 true ......

    $(document).ready(function(){
    //global vars
    var form = $("#signupForm");
    var email = $("#email");
    var email_error = $("#invalid");

    //On blur
   // userEmail.blur(validateEmail);

    //On Submitting
    form.submit(function(){

        if(validateEmail()){
            alert("submit true");
            return true;
        }else{
        alert("submit false");
            return false;
            }
    });


    function validateEmail(){
        //if it's NOT valid
        alert("In email");
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

        if(email.val() == ""){
            email_error.html("Please enter your email ");
            return false;
        }
        //if it's valid email
        else if(filter.test(a)==false){
            email_error.html("Please enter Valid email address");
            return false;
        }
        else if(filter.test(a)==true){alert("elseif");
        var baseUrl = '<?= base_url() ?>';

                $.ajax({
                    type: "POST",
                    url: baseUrl+"index.php/index/validateUserEmail",
                    data: "useremail="+$("#email").val(),
                    success: function(msg){
                    alert(msg);
                    if(msg == "1")
                        {
                            $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />');
                            $("#emailValidate").val("1");  
                            email_error.html("This email-Id already exists!");
                            return false;
                        }
                        else
                        {

                            $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />');
                            $("#emailValidate").val("0");
                            email_error.html(" ");
                            alert("alok");
                            return true;
                        }


                    }
                });

        }

        else{
        email_error.html(" ");
        return true;
        }

    }
});
4

4 回答 4

1

尝试类似的东西

$(document).ready(function() {
    // global vars
    var form = $("#signupForm");
    var email = $("#email");
    var email_error = $("#invalid");

    // On blur
    // userEmail.blur(validateEmail);

    // On Submitting
    form.submit(function() {

                validateEmail(function(flag) {
                            if (flag) {
                                alert("submit true");
                                form[0].submit();
                            } else {
                                alert("submit false");
                            }

                        });
                return false;
            });

    function validateEmail(callback) {
        // if it's NOT valid
        alert("In email");
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

        if (email.val() == "") {
            email_error.html("Please enter your email ");
            callback(false);
        }
        // if it's valid email
        else if (filter.test(a) == false) {
            email_error.html("Please enter Valid email address");
            callback(false);
        } else if (filter.test(a) == true) {
            alert("elseif");
            var baseUrl = '<?= base_url() ?>';

            $.ajax({
                        type : "POST",
                        url : baseUrl + "index.php/index/validateUserEmail",
                        data : "useremail=" + $("#email").val(),
                        success : function(msg) {
                            alert(msg);
                            if (msg == "1") {
                                $("#tick_cross").fadeIn("slow")
                                        .html('<img src="' + baseUrl
                                                + 'images/cross.png" />');
                                $("#emailValidate").val("1");
                                email_error
                                        .html("This email-Id already exists!");
                                callback(false);
                            } else {

                                $("#tick_cross").fadeIn("slow")
                                        .html('<img src="' + baseUrl
                                                + 'images/tick.png" />');
                                $("#emailValidate").val("0");
                                email_error.html(" ");
                                alert("alok");
                                callback(true);
                            }

                        }
                    });

        }

        else {
            email_error.html(" ");
            callback(true);
        }

    }
});

演示：小提琴

或者使用jQuery.deferred更好的解决方案

$(document).ready(function() {
    // global vars
    var form = $("#signupForm");
    var email = $("#email");
    var email_error = $("#invalid");

    // On blur
    // userEmail.blur(validateEmail);

    // On Submitting
    form.submit(function() {
                validateEmail().done(function() {
                            console.log("submit true");
                            form[0].submit();
                        }).fail(function() {
                            console.log("submit false");
                        });
                return false;
            });

    function validateEmail() {
        var deferred = jQuery.Deferred()

        // if it's NOT valid
        console.log("In email");
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

        if (email.val() == "") {
            email_error.html("Please enter your email ");
            deferred.reject();
        }
        // if it's valid email
        else if (filter.test(a) == false) {
            email_error.html("Please enter Valid email address");
            deferred.reject();
        } else if (filter.test(a) == true) {
            console.log("elseif");
            var baseUrl = '<?= base_url() ?>';

            $.ajax({
                        type : "POST",
                        url : baseUrl + "index.php/index/validateUserEmail",
                        data : "useremail=" + $("#email").val(),
                        success : function(msg) {
                            alert(msg);
                            if (msg == "1") {
                                $("#tick_cross").fadeIn("slow")
                                        .html('<img src="' + baseUrl
                                                + 'images/cross.png" />');
                                $("#emailValidate").val("1");
                                email_error
                                        .html("This email-Id already exists!");
                                deferred.reject();
                            } else {

                                $("#tick_cross").fadeIn("slow")
                                        .html('<img src="' + baseUrl
                                                + 'images/tick.png" />');
                                $("#emailValidate").val("0");
                                email_error.html(" ");
                                console.log("alok");
                                deferred.resolve();
                            }

                        }
                    });

        }

        else {
            email_error.html(" ");
            deferred.resolve();
        }

        return deferred.promise();
    }
});

演示：小提琴

于 2013-03-20T11:51:58.097 回答
0

您需要设置选项 async : false

于 2013-03-20T12:00:21.983 回答
0

我认为您必须等到响应完成。就绪状态==4

$.ajax({
                    type: "POST",
                    url: baseUrl+"index.php/index/validateUserEmail",
                    data: "useremail="+$("#email").val(),
                    success: function(){

                }).done(function (msg) {

alert(msg);
                    if(msg == "1")
                        {
                            $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />');
                            $("#emailValidate").val("1");  
                            email_error.html("This email-Id already exists!");
                            return false;
                        }
                        else
                        {

                            $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />');
                            $("#emailValidate").val("0");
                            email_error.html(" ");
                            alert("alok");
                            return true;
                        }


                    }
})
.fail(function() { alert("error";
 return true;
); });
于 2013-03-20T12:23:01.190 回答
0

问题是 AJAX 调用需要时间，但你的 if 语句需要立即返回。我也不确定返回 false 是否足够，我相信您需要捕获事件并对其调用 preventDefault() 方法...

最好的办法是将您的 <input type="submit" /> 按钮更改为 <input type="button" id="submitButton" />，然后form.submit()完全删除您现在拥有的处理程序。添加这个：

$(function(){
    $('#submitButton').click(validateEmail)

})

然后添加$("#signupForm").submit()到您的validateEmail()功能：

function validateEmail(){
    //if it's NOT valid
    alert("In email");
    var a = $("#email").val();
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;

    if(email.val() == ""){
        email_error.html("Please enter your email ");
        return false;
    }
    //if it's valid email
    else if(filter.test(a)==false){
        email_error.html("Please enter Valid email address");
        return false;
    }
    else if(filter.test(a)==true){alert("elseif");
    var baseUrl = '<?= base_url() ?>';

            $.ajax({
                type: "POST",
                url: baseUrl+"index.php/index/validateUserEmail",
                data: "useremail="+$("#email").val(),
                success: function(msg){
                alert(msg);
                if(msg == "1")
                    {
                        $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />');
                        $("#emailValidate").val("1");  
                        email_error.html("This email-Id already exists!");
                        return false;
                    }
                    else
                    {

                        $("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />');
                        $("#emailValidate").val("0");
                        email_error.html(" ");
                        alert("alok");
                        $("#signupForm").submit() // <--- HERE
                        return true;
                    }


                }
            });

    }

    else{
    email_error.html(" ");
    return true;
    }

}

你现在可能也可以清理一下......

于 2013-03-20T11:56:53.810 回答