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

标签 asp.net-mvc validation asp.net-mvc-3 unobtrusive-validation

我有一个“更改密码”页面,需要在发送之前对通过 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)它们?

最佳答案

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

.
.
.
    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

关于asp.net-mvc - ASP.NET MVC3 自定义不显眼的客户端验证不会阻止 Ajax 表单发布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4718479/

相关文章:

c# - 奇怪的 MVC 行为,AreaRegistrations 触发两次

asp.net-mvc - Asp.NET MVC 2 预览 2 : Area's aspx namespace problem

asp.net-mvc - 使用单数或复数 Controller URI 调用 Web API

validation - 在 swagger ui 中自定义输入验证

c# - 使用 ASP.NET MVC3 中的路由在 url 末尾添加查询字符串

.net - .NET Core 3.x 中的多个运行状况检查端点

java - 在 onBindAndValidate 中将值放入 error.getModel 中

javascript - Jquery 未定义条件不起作用

asp.net-mvc-3 - 指定 Html.TextBoxFor 的大小和最大长度

c# - 将数组值合并为单个值以显示在网格的单列中