asp.net-mvc - ASP.NET MVC3 自定义不显眼的客户端验证不会阻止 Ajax 表单发布

Question

我有一个“更改密码”页面，需要在发送之前对通过 Javascript 在页面上输入的所有密码进行哈希处理。更复杂的是，页面是通过 jQuery load() 调用加载的，并通过 jQuery.Form ajaxForm() 调用提交的。在 MVC2 中一切正常，但 MVC3 给我带来了麻烦。

也就是说，我有一个带有“更改密码”链接的页面，单击该链接时，会将更改密码页面加载到 jQuery 模式弹出窗口中，然后通过 jQuery.Form 库提交更改密码页面上的表单(本质上是只是包装一个 $.ajax 调用)，并将其结果返回到模态相同的模态弹出窗口中。

本质上，我有一个具有两个属性的模型:OldPassword 和 NewPassword。我有两个由 View 生成的隐藏字段。它们保存其他两个字段(PrehashOldPassword 和 PrehashNewPassword)的哈希值，并通过 keyup 事件进行更新(我知道，这意味着它在每个 keyup 上执行整个 SHA256 哈希......效率低下，但完成了测试工作)。这里的关键是，需要对这些 Prehash 字段执行正则表达式验证和必填字段验证，这些字段仅存在于客户端(显然我不想以任何方式将这些字段传输到服务器)。

因此，我手动创建这两个元素，并将 data-val-* 属性添加到元素中，即它们不是由 MVC 帮助程序等生成的。我猜这就是我遗漏的地方。当表单在所有字段为空的情况下提交时，所有应该弹出的错误都会弹出，但表单会直接继续并提交。

==

所以我尝试过的事情:

是的，不引人注目的库 parse() 方法已经被调用来解析 AJAX 加载的表单内容，并且它似乎正确地获取了所有数据验证内容，因为我看到错误显示为字段模糊()，并且当我点击提交时(在 ajax 请求完成并替换弹出窗口的内容之前)。

可能的注意事项:对不显眼库的解析方法的调用发生在 AJAX 成功将更改密码页面加载到弹出窗口之后... AJAX 表单提交绑定(bind)被放置在已加载内容的 document.ready 上，因此，AJAX表单提交绑定(bind)可以在解析方法可能绑定(bind)到提交事件的验证调用之前绑定(bind)，因此在验证调用之前触发...

但是，(1)我在其他地方做同样的事情没有问题，唯一的区别是我手动将这些 data-val-* 属性放在我手动创建的元素上! (2)，如果我在 OldPassword 或 NewPassword 字段上导致某种错误，即由于未向其中加载值而导致必填字段验证错误，它们会显示错误，并成功停止通过 jQuery.Form 提交表单方法。

所以我认为这里一定出了问题:

<input id="PrehashNewPassword" type="password" name="PrehashNewPassword" data-val-required="The password field is required." data-val-regex-pattern="<%= RegexHelper.PasswordRegularExpression %>" data-val-regex="<%= RegexHelper.PasswordRegularExpressionError %>" data-val="true" />

我知道 jquery.validate 的规则是正确的，因为我确实看到了错误。当这些手动生成的元素中出现错误时，它只是不会阻止表单提交，除非我执行类似的操作，并在表单的 AJAX 提交上添加预提交回调:

        $("#ChangePasswordForm").ajaxForm({
            beforeSubmit: function () { if (!$('#ChangePasswordForm').valid()) { return false; } },
            target: '#overlay'
        });

虽然这有效，但它有点丑陋，我相信它会导致验证被调用两次......没什么大不了的，但不太理想。那么我是否需要在不显眼的库中进行其他调用来绑定(bind)它们？

Answer 1

不确定您是否发现了问题，但您可以尝试返回错误如果表格无效...

.
.
.
    if (!$('form').valid()) {
           return false;
    }

    // JSON POST...
.
.
.

如果这不起作用，那么您可以尝试使用:

$.validator.unobtrusive.parse($("#dynamicData"));

动态添加自定义输入后。 “dynamicData”是围绕表单的元素的 ID

以上内容从这里找到:http://weblogs.asp.net/imranbaloch/archive/2011/03/05/unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc.aspx