jQuery：AJAX完成时提交表单

问题描述：

所以我有一个表单，点击提交后，我想在提交之前进行一些验证。我觉得挺直观的。因此，我在表单上设置了一个提交处理程序，并希望它能够执行AJAX检查，并在完成后，如果一切正常，请继续并像往常一样提交。jQuery：AJAX完成时提交表单

我尝试这样做，它失败很明显的原因：

$.when(checkUsername()).done(function (a) { 
    checkTitle(); 
    checkMessage(); 

    if (userValid && titleValid && messageValid) { 
     return true; 
    } 
}); 

return false;

checkUsername是$.post，而checkTitle和checkMessage只是检查，如果任何字符是在这些领域。每个功能相对验证userValid，titleValid和messageValid，将这些值设置为true或false。两个输入字段和文本区域都与每个相关功能相关联，所以即使在用户单击提交之前，表单也正在验证。

很显然，在最后返回false的情况下，表单将永远不会提交。但是，我原来在done之外有有效的检查（当前返回false是），并且如果用户输入了3个有效项目，然后擦除了一个字段并且没有离开/模糊，并且直接点击提交，它仍然会提交，因为AJAX仍在处理中，这些字段没有经过第二轮检查。

本质上，我希望表单等待提交，直到AJAX完成。但是submit()函数将在AJAX完成之前处理它的返回，并且我不能完成它，因为我需要AJAX触发提交。本质上，一个捕获22.

我想出了一些东西，我觉得这是一个混乱的方式做到这一点，但目前我能想到的唯一方法，并可以使用建议，如果这是唯一的方法做它，或我有什么其他选择。我知道我可以通过AJAX提交表单，但我希望看到有哪些选项可用。这是凌乱的方法：

if (validated) return true; 
else { 
    $form = $(this); 
    $.when(checkUsername()).done(function (a) { 
     checkTitle(); 
     checkMessage(); 

     if (userValid && titleValid && messageValid) { 
      validated = true; 
      $form.submit(); 
     } 
    }); 

    return false; 
}

在这种情况下，存在仅由AJAX设置一个主验证变量，并在完成后该系统重新提交。

答

您的解决方案是要走的路。 .done方法由于是异步执行而具有不同的上下文，这意味着您的验证方法在调用时总是返回false。

答

因为您的验证是异步的，所以您需要做一些小动作。您可以使用.data()函数来检查您的表单数据是否经过验证。如果没有做验证。在验证中，您可以将validated数据设置为true，并再次通过jquery触发submit。

另外还有一点需要注意，我希望你仍然可以验证表单服务器端收到的数据，因为javascript验证可以被绕过。

您需要将表单元素或查询替换为您的表单中的$(form)。

$(form).submit(function(event) { 
    //check if already validated 
    if (!$(this.data("validated")) { 

     doValidation(); 
     //prevent form form submitting because validation is in progress. 
     event.preventDefault(); 
    } 

}); 



function doValidation() { 

    //do you validation suff. 
    $.when(checkUsername()).done(function(a) { 
     checkTitle(); 
     checkMessage(); 

     if (userValid && titleValid && messageValid) { 
      //mark the form as validated 
      $(form).data("validated", true); 
      //trigger submit via jquery 
      $(form).submit(); 
     } 
    }); 

}

或者你去AJAX的方式和$.post发表您的形式（只有当你有没有文件输入元素的作品）。

$.post($(form).attr("action), $(form).serialize());

jQuery：AJAX完成时提交表单

相关推荐