如何获得不显眼的jQuery远程验证执行异步..？ [英] How to get unobtrusive jquery remote validator to perform async..?

问题描述

在一个MVC3应用程序，使用jQuery不显眼的审定，一个视图/模型用[远程]验证：我试图禁用远程验证期间提交按钮和显示的等待图标，当一个有效的形式提交给服务器。我原本以为它钉，直到我在IE8尝试过。

In an MVC3 app, using jquery unobtrusive validation, and a view/model with a [Remote] validator: I am trying to disable the submit button and display a wait icon during remote validation, and when a valid form is submitted to the server. I thought I had it nailed until I tried it in IE8.

问题是，GC和FF没有射击表单的提交事件时，形式是无效的，所以我只是禁用此活动期间提交按钮。然而，当表格无效，导致用户永远无法再次点击IE8是激发此事件。 （IE8不提交表单，但该事件被触发。）

The problem was, GC and FF were not firing the form's submit event when the form was invalid, so I just disabled the submit button during this event. However IE8 is firing this event when the form is invalid, causing the user to never be able to click it again. (IE8 does not submit the form, but the event is fired.)

我试图连接到提交按钮的点击事件的函数。在那里，我禁用提交按钮，显示等待图标，并有这样的：

I tried attaching a function to the submit button's click event. In there, I disabled the submit button, showed the wait icon, and had this:

$('[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);
});

问题是，阿贾克斯建立呼叫是不是真的关闭异步。确实，如果我将它移出点击的功能，但它禁用异步的一切。相反，页面提示真随即，通过设置远程验证动作方法中设置断点测试。

The problem is, the ajax setup call is not really turning off async. It does if I move it out of the click function, but then it disables async for everything. Instead, the page alerts "true" immediately, tested by setting a breakpoint on the remote validation action method.

任何想法？

其他注意事项：

我忘了提，在IE8，提交事件时有问题的文本框中失败，可以在客户端上发生验证只被解雇。例如，如果失败，要求或正则表达式，提交（）被触发。对于远程验证操作方法，它不会被解雇。但是，只要它没有客户端验证，随后远程验证也触发IE8提交的事件。

I forgot to mention, in IE8, the submit event is only being fired when the text box in question fails a validation that can happen on the client. For example, if it fails required or regex, submit() is fired. For the remote validation action method, it is not fired. However, as soon as it fails a client validation, subsequent remote validations also trigger the IE8 submit event.

响应拉斯凸轮（注释1）

下面是在视图模型相关的code：

Here is the relevant code in the viewmodel:

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)
    {

我很高兴你让我看一下渲染＆LT;形式为GT; 。 form标签和输入元素是这样的：

I'm glad you had me look at the rendered <form>. The form tag and input elements look like this:

<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文件：

I never saw the novalidate="novalidate" attribute until now. Here is what it looks like in the cshtml file:

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

我还使用防伪标记，如果有差别。谢谢你。

I am also using anti-forgery token, if that makes a difference. Thanks.

推荐答案

这是一种哈克，但我会建议尝试以下操作。

It's kind of hacky, but I would suggest trying the following.

首先，隐藏的提交按钮显示=无，并显示自己的提交按钮，它上面运行你的脚本。

First, hide the submit button with display="none", and show your own "submit" button, which runs your script above.

二，在你的页面上，添加一个标志变种[ VAR remotePending = FALSE; ]和一个变量的setInterval 调用[ VAR intervalPending; ]，并在你的脚本，设置标志为true，则使用调用下面的函数 intervalPending =的setInterval（' remoteCheck（），200）;

Second, in your page, add a flag var [var remotePending = false;] and a variable for a setInterval call [var intervalPending;], and in your script, set the flag to true, then call the following function using 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
}

这将让你等待待定远程验证完成，然后继续正常进行。我没有测试过，所以你可能要玩，你要得到这个工作。

This will allow you to wait for the completion of the pending remote validation, then proceed normally. I have not tested, so you may have to play around to get this working as you want.

这篇关于如何获得不显眼的jQuery远程验证执行异步..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！