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

Question

在 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 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")
}

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

Answer 1

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

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

其次，在您的页面中，添加一个标志 var [var remotePending = false;] 和一个用于 setInterval 调用的变量 [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
}

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

Answer 2

我对此有点晚了，但我在尝试解决类似问题时偶然发现了这个问题。我也不想使用 Interval，所以我制定了一个不同的解决方案，并认为可能值得在这里为其他人详细介绍。

最后我决定重写 jQuery 验证器 startRequest 和 stopRequest 方法以添加我自己的逻辑。执行我自己的逻辑后，我只需调用旧的验证器方法。

// Extend jQuery validator to show loading gif when making remote requests
var oldStartRequest = $.validator.prototype.startRequest;
$.validator.prototype.startRequest = function (element) {
    var container = $('form').find("[data-valmsg-for='" + element.name + "']");
    container.addClass('loading');       

    oldStartRequest.apply(this, arguments);
};

var oldStopRequest = $.validator.prototype.stopRequest;
$.validator.prototype.stopRequest = function (element) {
    var container = $('form').find("[data-valmsg-for='" + element.name + "']");
    container.removeClass('loading');

    oldStopRequest.apply(this, arguments);
};

为了实现我的目的，我想做的就是简单地将“正在加载”CSS 类添加到相邻的验证消息字段，以显示正在加载的 gif，但您可以轻松扩展它以启用/禁用按钮等。

Answer 3

昨晚我发现自己对此感到困惑，在尝试了各种方法之后，我最终得到了辅导员的进化。由于辅导员不能直接开箱即用，我想我应该分享它以防止其他人遇到同样的头痛。它不像我想要的那样“干净”的解决方案（我真的很讨厌使用间隔）。但似乎就足够了。

var iIntervalId = null;

//
// DECLARE FUNCTION EXPRESSIONS
//

//==============================================================================
// function that triggers update when remote validation completes successfully
//==============================================================================
var fnPendingValidationComplete = function () {

  var validator = $("#frmProductType").data("validator");
  if (validator.pendingRequest === 0) {

    clearInterval(iIntervalId);

    //Force validation to present to user (this will not retrigger remote validation)
    if ($("#frmProductType").valid()) {

      alert("valid - you can submit now if you like");

    }
    //else { alert("invalid"); }
  }
  //else { alert("NOT YET"); }
},

//==============================================================================
// Trigger validation
//==============================================================================
fnTriggerValidation = function (evt) {

  //Remove any cached values to ensure that remote validation is retriggered
  $("#txtProductType").removeData("previousValue");

  //Trigger validation
  $("#frmProductType").valid();

  //Setup interval which will evaluate validation (this approach because of remote validation)
  iIntervalId = setInterval(fnPendingValidationComplete, 50);
};

fnTriggerValidation();

Answer 4

我最终解决了这个问题，但是按钮禁用/等待图像显示仅在存在有效的提交表单时才会发生。不过没关系，因为多个无效表单提交是幂等的，用户可以随意点击。 （此外，远程验证操作方法会根据其参数值进行缓存。）

$(function () {
    $('form').bind('invalid-form.validate', function () {
        $('form').each(function () {
            $(this).find(
                '[data-app-form-submitting-icon="true"]').hide();
            var button = $(this).find(
                'input[type="submit"][data-app-form-submit-button="true"]');
            setTimeout(function () {
                button.removeAttr('disabled');
            }, 1);
        });
    });
    $('form').live('submit', function (e) {
        $(this).find('[data-app-form-submitting-icon="true"]').show();
        var button = $(this).find(
            'input[type="submit"][data-app-form-submit-button="true"]');
        setTimeout(function () {
            button.attr('disabled', 'disabled');
        }, 0);
    });
});

这也有点 hacky，但是当我不使用 setTimeout 时，提交操作永远不会触发无效处理程序。

Answer 5

我经历了所有的方法，一切都很好，但没有任何效果。
然后我检查模型（类或DTO）项目的System.Web.Mvc版本，并且View的项目存在版本差异。我将两者更新到相同的版本，它对我有用。

我检查 html 生成丢失
data-val-remote-additionalfields=".电子邮件"
例如，我正在检查它们。