下一步对Ajax验证内容的字段进行有效性检查

Next-step validity check on fields where contents are validated by Ajax

本文关键字：字段 有效性检查 Ajax 验证 下一步      更新时间：2023-09-26

我一直在整理一个注册表单，它基本上分为三个部分;您填写您的姓名，电子邮件，用户名等，然后您选择的选项(颜色，介绍文字等)，然后您的地址详细信息。每个步骤至少有一个字段使用ajax来检查其有效性;例如，检查重复的电子邮件或用户名，建议替代的页面标题等。

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

很方便，我没有使用任何类型的插件-我自己编码的一切。当ajax字段检查其输入的有效性时，它们确实有一个.loading类附加，最终将变成.okay或.error类，但在一些屏幕上有2-4个ajax检查的字段，所以我需要等待所有在继续之前进行验证。

我当前的验证函数非常简单:

$(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;DR我正试图找出如何在做任何事情之前"等待"我所有的ajax字段返回响应。

值得注意的

:

整个东西被包裹在一个大的<form>元素中。这不是每个步骤都要提交的;只有在最后，当每个步骤都被临时验证时。它(非常基本)看起来像这样:http://jsfiddle.net/zVAxs/(HTML标记仅用于说明结构)。

如有任何帮助或指点，我将不胜感激

我不太确定这是你要找的，但是$。ajaxSetup({async: false})是我能想到的。尝试在代码的开头使用它，这样代码将等待请求

的答案。

如果你可以显式调用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();
});

then()函数只在所有ajax请求成功完成时执行。

相关文章：