向动态创建的元素添加jQuery验证器规则

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

现在我明白了插件的不起眼的一面是怎么回事(我明白这与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/

Answer 2

事实证明，这主要是在HTML中通过向每个表单元素添加一些属性来完成的：

attribute

• data-val="true"

• data-val-required="message"

• A name

如下所示：

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

我认为你犯了一些更简单的错误--比如你的find('.date')实际上没有找到任何东西。因为不然的话，你的代码在我看来相当合理。下面是它按照您的预期工作的一个示例：http://jsfiddle.net/ryleyb/LNjtd/

我能够用下面的代码正确地验证代码：

$('form fieldset')
    .append('<br>New Field: <input type="text" name="newField"> * Also required')
    .find('input[name="newField"]').rules('add', {
      required: true,
      messages: {
        required: 'New field is required'
      }
    }
);​