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

Question

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

让我们想象一下，我唯一的验证规则是需要书名。

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

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

文档告诉我们，如果我们想为元素设置自定义错误消息，我们可以这样做这使用 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" />

（摘自黑客）

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

Answer 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');
    }
}

Answer 2

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

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