将jQuery验证器规则添加到ASP中动态创建的元素

Question

我在MVC3项目的页面上有一些动态插入的表单字段.通常我们会添加jQuery验证服务器端,但在这种情况下我们不能(UI中的多个字段生成一个隐藏字段的值 - 这就是提交的内容.我们无法验证隐藏字段,所以我们必须为用户可以看到的字段添加仅UI验证)

将字段动态添加到页面后,我在容器上运行以下代码:

$container.find(".date").rules("add", {
    required: true,
    messages: {
        required: "The date is required"
    }
});

但它不起作用!奇怪的是,禁用上面的代码,创建动态元素,然后在浏览器JS控制台中运行代码,但只显示默认验证消息.

我不知所措.有任何想法吗？

我正在使用jQuery Validation 1.9.0和不引人注目的插件

Answer 1

事实证明,这可以通过向每个表单元素添加一些属性来主要在HTML中完成:

• 一个name属性
• data-val="true"
• data-val-required="message"

像这样:

<input type='text' name="date" data-val="true" data-val-required="A date is required." />

然后表单只需要通过JS重新解析:

//Remove current form validation information
$("form")
    .removeData("validator")
    .removeData("unobtrusiveValidation");

//Parse the form again
$.validator
    .unobtrusive
    .parse("form");

Answer 2

现在我已经了解了Unobtrusive插件方面的内容(我理解这与ASP.NET有关),这就是你需要做的:

添加新元素后,调用$.validator.unobtrusive.parseElement(newElement)它将添加到表单中.如您的答案所示,您需要在新表单元素中设置data-val和data-val-required属性.

所以你最终得到这个:

//create new form element
$('form fieldset').append('<br>New Field: '+
     '<input type="text" data-val="true" data-val-required="A date is required." name="newField">'+
     ' * Also required');

//add new rules to it
$.validator.unobtrusive
  .parseElement($('form').find('input[name="newField"]').get(0));

如图所示:http: //jsfiddle.net/ryleyb/LNjtd/2/