通过Ajax验证内容的字段的下一步有效性检查

Question

我已经整理了一个注册表格，基本上分为三个部分:你填写你的名字，电子邮件，用户名等，然后你选择的选项(颜色，介绍文字等)，然后你的地址细节。这些步骤中至少有一个字段使用ajax检查其有效性；即检查重复的电子邮件或用户名，建议备选页面标题，等等。

这些ajax函数是在keyup input blur上触发的(在短暂的延迟之后)，但我只是突然意识到，当有人单击以进入下一个注册步骤时，我还想验证输入。我通常使用的方法是在当前注册步骤的所有字段上触发一个blur，如果任何字段都附加了.error，则不允许用户继续前进；但是，在字段上触发ajax侦听器，意味着它们不会立即返回错误。

轻松地，我没有使用任何插件-我自己编码了所有的东西。当ajax字段检查其输入的有效性时，它们确实附带了一个.loading类，它最终将变成.okay或.error类，但是在一些屏幕上，同时有2-4个ajax检查字段，所以我需要等待所有的进行验证才能继续前进。

我当前的验证功能是uber-简单：

$(document).on('click', '.step button.validate', function() {
    
    var currentStep = $(this).closest('.step');
    
    //  Let's try to trigger those errors ON PORPOISE
    
    currentStep.find('input, select, textarea').trigger('blur');
    
    if (currentStep.find('.error').length) {
        
        //  No dice.
        
        alert('This is bad, yo.');
        
        return false;
    }
    
    //  Everything looks hunky-dory; the form should submit as normal
    
    gotoNextStep();
});

TL；博士--我正试图弄清楚如何“等待”我所有的ajaxified在做任何事情之前返回一个响应。

值得注意的是：

整个过程都封装在一个大的<form>元素中。这并不是在每个步骤都提交的情况下提交的；只是在每个步骤都已临时验证时才提交。它(基本上)看起来是这样的：http://jsfiddle.net/zVAxs/ (仅用于说明结构的HTML)。

任何正确方向的帮助或指示都将不胜感激。

Answer 1

我不太确定这是否是您要找的东西，但是$.ajaxSetup({异步: false})是我能想到的。尝试在代码开始时使用它，这样代码将等待请求的答复。

Answer 2

如果您可以显式调用ajax验证函数(而不是通过触发模糊)，那么jQuery的when()函数可能会对您有所帮助：http://api.jquery.com/jQuery.when/

来自jQuery样本：

$.when( $.ajax( "/validation1.php" ), $.ajax( "/validation2.php" ) ).then(function( a1, a2 ) {
    // a1 and a2 are arguments resolved for the validation1 and validation2 ajax requests, respectively.
    // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
    gotoNextStep();
});

然后，只有当所有ajax请求都成功完成时，才执行()函数。