Question

我在将访问者信息添加到mysql数据库之前尝试验证表单。 jQuery脚本如下：

var phone = $("input#phone").val();
    if (phone == "") {
  $("label#phone_error").show();
  $("input#phone").focus();
  return false;
}

//Captcha validation
var security_code = $("input#security_code").val();
$.ajaxSetup({cache: false})
$.get('getsession.php', {requested: 'seccode'}, function (data) {
var session = data;

if (security_code !== session) {
    $("label#security_code_error").show();
    $("input#security_code").focus();
    alert ('NO MATCH: '+security_code+' '+session);
    return false; // <= FUNCTION SHOULD EXIT HERE
} else {
    alert ('MATCH!!!: '+security_code+' '+session);
}
});     

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  url: "bin/process.php",
  data: dataString,
  success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
 });
return false;
});
});

如果缺少名称，则表单会显示错误并将焦点集中在要完成的字段上。问题是验证码验证。如果匹配，则表单已成功处理并且会将潜在客户添加到数据库中，但是，如果在文本字段中输入的安全代码与生成的代码不匹配，则会显示错误但表单信息仍会添加到数据库中。看起来像“return false; //＆lt; = FUNCTION SHOULD EXIT HERE”在这里看不到。关于我的代码有什么问题的任何建议？

Answer 1

试试这个

var phone = $（“input＃phone”）。val（）; if（phone ==“”）{ $（ “＃标签phone_error”）显示（）。 $（ “＃输入手机”）专注（）; 返回false; }

//Captcha validation
var security_code = $("input#security_code").val();
$.ajaxSetup({cache: false})
$.get('getsession.php', { requested: 'seccode' }, function(data) {
    var session = data;

    if (security_code !== session) {
        $("label#security_code_error").show();
        $("input#security_code").focus();
        alert('NO MATCH: ' + security_code + ' ' + session);
    } else {
        alert('MATCH!!!: ' + security_code + ' ' + session);
        var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
        $.ajax({
            type: "POST",
            url: "bin/process.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<h2>Contact Form Submitted!</h2>")
                    .append("<p>We will be in touch soon.</p>")
                    .hide()
                    .fadeIn(1500, function() {
                        $('#message').append("<img id='checkmark' src='images/check.png' />");
                    });
            }
        });
    }
});

Answer 2

您希望结束执行的return false位于AJAX请求的回调函数中。 AJAX中的第一个A代表异步，因此在请求返回成功响应之前不会执行该函数。

但是，由于是异步，因此发出该AJAX请求的其余函数仍将执行，因此提交单独的AJAX POST请求以提交表单数据，与第一个AJAX调用完全无关

您需要做的是将代码的下面部分移动到检查验证码的AJAX请求的回调函数中，并且只有在验证成功时才执行它。

var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
    }
});

整个代码看起来像这样：

var phone = $("input#phone").val();
if (phone == "") {
    $("label#phone_error").show();
    $("input#phone").focus();
    return false;
}

//Captcha validation
var security_code = $("input#security_code").val();
$.ajaxSetup({
    cache: false
})
$.get('getsession.php', {
    requested: 'seccode'
}, function(data) {
    var session = data;

    if (security_code !== session) {
        $("label#security_code_error").show();
        $("input#security_code").focus();
        alert('NO MATCH: ' + security_code + ' ' + session);
        return false; // <= FUNCTION SHOULD EXIT HERE
    } else {
        alert('MATCH!!!: ' + security_code + ' ' + session);
        // successful, so let's submit the details
        var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;
        $.ajax({
            type: "POST",
            url: "bin/process.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<h2>Contact Form Submitted!</h2>").append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
                    $('#message').append("<img id='checkmark' src='images/check.png' />");
                });
            }
        });
    }
});

Answer 3

您不能在函数外使用return。

jQuery函数没有停止执行

3 个答案: