动态局部视图 + jquery 表单劫持 + 客户端验证 = 不工作

Posted 2023-05-09

【中文标题】动态局部视图 + jquery 表单劫持 + 客户端验证 = 不工作

【英文标题】：Dynamic partial view + jquery form hijack + client validation = not working

【发布时间】：2011-06-25 12:15:40

【问题描述】：

我使用 MVC 3 和不显眼的 javascript 进行客户端验证。

我有一个表格，其中包含可点击的行。单击时，我想调出动态加载的局部视图。这是这个的代码：

function GetStuff(id) 
    $.ajax(
    
        url: "Edit/" + id,
        success: function (result) 
            $("#DivTest").html(result);
        
    );

到目前为止一切正常。 问题是当我尝试使用 jquery 在部分中保存某些内容时。表单被劫持，如下所示：

$(function () 
    $.post($(this).attr("action"),
        $(this).serialize(),
        function (data) 
            alert("test");
        );
    e.preventDefault();
);

所有这些都使客户端验证不起作用。即使我遗漏了一些必需的值，它也会发布。如果我不使用 ajax 发布或者在页面加载时加载部分内容（非动态），这一切都有效。

---

我尝试过的：

我试着把这个放在帖子之前：

if($('form').validate().form())
    ...

这只是每次都返回 true..

从这篇文章中我得到了 2 条建议 ASP.NET MVC 2 loading partial view using jQuery - no client side validation

添加

Sys.Mvc.FormContext._Application_Load(); 

部分加载后.. 并将帖子的数据类型设置为“html”。都没有用。

我也尝试过这种方法，但没有成功： http://www.deepcode.co.uk/2010/08/mvc-ootb-validation-when-pulling-in.html

我猜这种技术组合很常见，为什么很难让它发挥作用？非常感谢任何帮助。 谢谢

【参考方案1】：

在新表单成功加载 ajax 后，您必须指示不显眼的验证库通过手动调用来解析新表单：

// insert new form into the DOM first, then call:
$.validator.unobtrusive.parse('<form selector>'));
$('<form selector>').validate(); // start validating

这会根据表单子元素中的 data-xxx 属性设置 jquery.validation 验证器。

之后，调用 $('<form selector>').validate().form() 应该会按预期工作！

【讨论】：

这很好用。我想这比我刚刚提出的解决方案（在局部视图中添加 js 文件）要好。将其他人的答案标记为正确也比我自己的感觉好得多:)

tnx，从技术上讲，这就是不显眼的验证脚本在 $(document).ready() 处理程序中注册的内容。所以我的解决方案和你的解决方案执行相同的代码:)

这也回答了我遇到的一个问题。但是，它正在验证新表单（并且在每个字段上都失败，因为它是空的），这不是最佳的。任何想法为什么这样做/如何阻止它？

【参考方案2】：

你为什么要劫持部分表单？我认为因为你劫持了不显眼的实时事件没有触发表单，这就是你没有收到验证错误的原因。

您是否尝试过使用 Ajax 表单？ (Ajax.BeginForm(...))

如果您引入部分 ajax 表单，它应该包含验证所需的所有信息。提交表单后，您可以指定要运行的 javascript 函数。

【讨论】：

我已经阅读了几篇文章，建议不要使用任何 MS ajax 方法，而是使用 jquery，特别是如果其他所有操作都使用 jquery 完成。我尝试了这个，但事件没有触发（比如“OnBegin”和“OnSuccess”。而是发布页面仅返回其自身的部分视图。

在 MVC 3 中，ajax 已更改为使用 jquery，并且 IMO 得到了极大的改进。发布到操作后，您如何返回结果？您要返回 Json 结果吗？如果没有尝试。这样你就可以在你的 jquery onsuccess 中解析 json 并确定要做什么。

我正在返回一个 PartialView(model) 但我不介意返回 json 并解析结果。我现在尝试了这个，但无论如何都没有调用该事件，所以我无法处理结果。我在 BeginForm 中设置了这些参数：OnBegin、OnSuccess、OnComplete、OnFailure、HttpMethod = "post"。但没有一个事件有效。

你的javascript函数是什么样的？例如OnSuccess 是否与 jquery ajax 签名匹配，所以它看起来像函数 OnSuccess(data, textStatus, jqXHR)？见：api.jquery.com/jQuery.ajax。如果仍然无法正常工作，您可以发布您的代码吗？

它只是函数 OnComplete(content) alert("test") 但它永远不会被调用。我在没有参数和你建议的情况下进行了测试。没有事件被调用 :( 页面被发布，页面被我的 Json 结果字符串替换。

【参考方案3】：

好吧，我终于明白了。问题就在那里，无论我是使用表单还是使用 Ajax.BeginForm(...)，都没有区别。如果我没有动态加载部分，它总是有效的。

解决方案？

将 jquery.validate.unobtrusive.min.js 添加到 partial 视图中。 这可能是一个新手错误，仅将其添加到父视图或母版页，但如果这对某人有帮助，我很乐意承认我的这个错误:) 正是这个 js 文件使客户端验证工作，当然每次加载部分（其中包含客户端验证）时都必须调用它。