如何让不显眼的 jquery 远程验证器执行异步..？

在 MVC3 应用程序中，使用 jquery 不显眼的验证以及带有 [远程] 验证器的视图/模型：我试图在远程验证期间以及将有效表单提交到服务器时禁用提交按钮并显示等待图标。我以为我已经搞定了，直到我在 IE8 中尝试了它。

问题是，当表单无效时，GC 和 FF 不会触发表单的提交事件，因此我只是在此事件期间禁用了提交按钮。然而，当表单无效时，IE8 会触发此事件，导致用户永远无法再次单击它。 （IE8 不提交表单，但会触发该事件。）

我尝试将一个函数附加到提交按钮的单击事件。在那里，我禁用了提交按钮，显示了等待图标，并得到了以下内容：

$('[data-app-form-submit-button="true"]').live('click', function (e) {
    var form = $(this).parents('form');
    var icon = form.find('[data-app-form-submitting-icon="true"]');
    icon.show();
    $(this).attr('disabled', 'disabled');
    $.ajaxSetup({ async: false });
    var isValid = form.valid();
    $.ajaxSetup({ async: true });
    alert(isValid);
});

问题是，ajax 设置调用并没有真正关闭异步。如果我将其移出单击功能，它会执行此操作，但随后它会禁用所有内容的异步。相反，页面会立即发出“true”警报，这是通过在远程验证操作方法上设置断点进行测试的。

有任何想法吗？

附加说明：

我忘了提及，在 IE8 中，仅当相关文本框未通过客户端上可能发生的验证时才会触发提交事件。例如，如果必需的或正则表达式失败，则将触发 Submit()。对于远程验证操作方法，不会触发它。但是，一旦客户端验证失败，后续的远程验证也会触发 IE8 提交事件。

对 Russ Cam 的回应（评论#1）

这是视图模型中的相关代码：

public class SignUpForm : IValidatableObject
{
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email Address")]
    [Required(ErrorMessage = "Email Address is required.")]
    [RegularExpression(@"^(email regex here)$",
        ErrorMessage = "This is not a valid email address.")]
    [Remote("Validate", "ControllerName", "AreaName", HttpMethod = "POST")]
    public string EmailAddress { get; set; }

    public IEnumerable<ValidationResult> Validate(
        ValidationContext validationContext)
    {

我很高兴你让我看看渲染的<form>。表单标签和输入元素如下所示：

<form action="/post-action-method" method="post" novalidate="novalidate">
...
<input class="text-box single-line" data-app-focus="true" data-val="true" 
    data-val-regex="This is not a valid email address." 
    data-val-regex-pattern="^(email regex here)$" 
    data-val-remote="&amp;#39;Email Address&amp;#39; is invalid." 
    data-val-remote-additionalfields="*.EmailAddress" 
    data-val-remote-type="POST" 
    data-val-remote-url="/validate-action-method" 
    data-val-required="Email Address is required." 
    id="EmailAddress" name="EmailAddress" type="text" value=""> 
 ... 
<input type="submit" value="Submit this form" 
    data-app-form-submit-button="true" />

直到现在我才看到 novalidate="novalidate" 属性。 cshtml 文件中的内容如下：

@using (Html.BeginForm())
{
    @Html.EditorForModel()
    @Html.AntiForgeryToken("assault")
}

我还使用防伪令牌，如果这有什么区别的话。谢谢。

这有点老套，但我建议尝试以下方法。

首先，隐藏提交按钮display="none"，并显示您自己的“提交”按钮，该按钮运行上面的脚本。

其次，在您的页面中添加一个标志 var [var remotePending = false;] 和一个变量setInterval call [var intervalPending;]，并在脚本中将标志设置为 true，然后使用以下函数调用intervalPending = setInterval('remoteCheck()', 200);

function remoteCheck() {
    if ($.validator.pendingRequest == 0) {
        // requests are done
        // clear interval
        clearInterval(intervalPending);
        // re-enable our "submit" button

        // "click" the hidden button
        $("#hiddenSubmit").click();
    }
    // we will try again after the interval passes
}

这将允许您等待挂起的远程验证完成，然后正常继续。我还没有测试过，所以你可能需要尝试一下才能按你想要的方式工作。