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

时间:2011-01-17 22:10:40

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

我有一个“更改密码”页面,需要在发送之前通过Javascript对在页面上输入的任何密码进行哈希处理。为了使它复杂化,页面通过jQuery load()调用加载,并由jQuery.Form ajaxForm()调用提交。如果一切都在MVC2中运行,但MVC3给我带来了麻烦。

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

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

所以我手动创建这两个并将data-val- *属性添加到元素中,即它们不是由MVC助手等生成的。我猜这是我遗漏的东西。当表单提交所有字段为空时,应弹出所有错误,但表单仍然向前并提交。

==

所以我尝试过的事情:

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

可能需要注意:在AJAX成功将更改密码页面加载到弹出窗口后,调用不显眼的库的解析方法... AJAX表单提交绑定放在document.ready的加载内容上,ergo,AJAX表单提交绑定可以在解析方法绑定到提交事件的验证调用之前进行绑定,然后在之前触发...

然而,(1)我在其他地方做同样的事情没有问题,唯一的区别是我手动将这些数据-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'
        });

虽然这有效,但它有点难看,我相信它会导致验证被调用两次......不是很大,但不太理想。那么我是否需要在不显眼的库中进行其他调用来绑定这些调用?

2 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:0)

出于兴趣,如果您只是获得要验证的表单会发生什么?

<script type="text/javascript">
    $("form").submit(function (evt) {

        // validate here should trigger invalid fields
        $('form').valid();

        // JSON POST...         

        // stop form submitting
        evt.preventDefault();
    });
</script>