使用带有动态生成表单的自定义错误消息的 jQuery 验证答案

【问题标题】：Using jQuery validation with custom error messages with dynamically-generated forms使用带有动态生成表单的自定义错误消息的 jQuery 验证
【发布时间】：2011-04-11 11:20:23
【问题描述】：

我有一个表单，允许我在一个 HTML 表单中为多个实体（例如书籍）设置值。页面的 ASP.NET MVC 视图采用包含 List<Book> 的模型。这被迭代以呈现每本书的表单元素。

假设我唯一的验证规则是书名是必需的。

如果用户未能输入任何书名，那么我想使用一个 css 类突出显示所有相关的书名文本框，并仅显示一次“需要书名”的警报。

我想使用 jQuery 验证插件来实现这一点。

documentation 告诉我们，如果我们想为某个元素设置自定义错误消息，我们可以在 validate() 设置调用的 messages: 部分中使用相关 HTML 表单元素的 name 属性来执行此操作.

例如（我的 HTML 元素有一个name title）

$(".selector").validate({
    rules: {
        title: "required",
    },
    messages: {
        title: "Book titles must be set",
    }
})

但是，这似乎与 ASP.NET MVC 模型绑定需要使用 name 属性的方式不兼容，当绑定到列表时，它使用每个表单元素的 name 属性使用非常特定的语法，例如

<form method="post" action="/Home/Create">

    <input type="text" name="[0].Title" value="Curious George" />
    <input type="text" name="[0].Author" value="H.A. Rey" />
    <input type="text" name="[0].DatePublished" value="2/23/1973" />

    <input type="text" name="[1].Title" value="Code Complete" />
    <input type="text" name="[1].Author" value="Steve McConnell" />
    <input type="text" name="[1].DatePublished" value="6/9/2004" />

    <input type="text" name="[2].Title" value="The Two Towers" />
    <input type="text" name="[2].Author" value="JRR Tolkien" />
    <input type="text" name="[2].DatePublished" value="6/1/2005" />

    <!-- There could be several more books in the form... -->
<input type="submit" />

（取自Haacked）

就 jQuery 验证而言，name 属性的这些冲突用法是否会破坏交易？

【问题讨论】：

你的意思是这 3 个实体中只有一个会有书名吗？
@Muhammad：不。我的实体是书，所以它们都有相同的三段数据与之关联。我已经更新了问题的最后一部分，以使这一点更清楚。

标签： jquery asp.net-mvc asp.net-mvc-2 validation

【解决方案1】：

这就是我所做的（减少解释代码）

创建一个全局变量来保存验证消息，称为：validationMessages

在 jquery 验证的 errorPlacement 选项中，我有：

errorPlacement: function (error, element) { validationMessages += $(error).text() + '<br />'; },

然后这里是我的提交表单功能...

function submitForm() 
{
    validationMessages = '';

    var valid = true;

    // do more/other/custom validation and css manipulation here
    // if item not valid, set valid = false and add to validationMessages as in errorPlacement

    if ($("#MainForm").valid() && valid) 
    {
        $("#MainForm").submit();
    }
    else 
    {
        // Show Message eg: mine looks like showAlert('Please complete the form', validationMessages, '600');
    }
}

【讨论】：

我理解你的方法，但我认为 ASP.NET MVC 如何使用 name 属性将与 jQuery 验证想要使用它们的方式不兼容。我已经更新了我的帖子以澄清这一点。
@Richard Ev：我不知道这些绑定属性是如何工作的，因为我不使用它们，所以我猜你是对的，可能无法直接/轻松兼容。

【解决方案2】：

不幸的是，由于上述原因，您不能在 jquery 验证器中使用带有“[0].Title”这些字符的名称。 Jquery 验证器使用 HTML 元素的 name 属性来构建一个 javascript 对象来设置验证规则和验证消息。

一种解决方案是在使用 jquery 验证器之前更改 name 属性的值，然后在将表单发布到服务器之前将其设置回来。但是，这只有在客户端没有任何内容时才有效，具体取决于诸如“[0].Title”之类的名称。

【讨论】：