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

I've got some dynamically inserted form fields on a page in an MVC3 project. Normally we would add the jQuery validation server-side, but in this case we can't (multiple fields in the UI generate the value for one hidden field - and this is what is submitted. We can't validate against a hidden field, so we must instead add UI-only validation for the fields the user can see)

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

Once the fields are dynamically added to the page, I run the following code over the container:

一旦这些字段被动态添加到页面中，我将在容器上运行以下代码:

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

But it doesn't work! Oddly enough, disabling the above code, creating the dynamic elements, then running the code in the browser JS console works, but only the default validation message shows.

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

I'm at a loss. Any ideas?

我亏本。什么好主意吗?

I am using jQuery Validation 1.9.0 & the unobtrusive plugin

我正在使用jQuery验证1.9.0和不显眼的插件

3 个解决方案

#1

Now that I understand what's going on with the Unobtrusive plugin side of things (which I understand is related to ASP.NET somehow), here's what you need to do:

现在我已经了解了不引人注目的插件方面发生了什么(我知道这与ASP有关。以下是你需要做的:

After you add your new element, call $.validator.unobtrusive.parseElement(newElement) and it will get added to the form. As your answer suggested, you need to set the data-val and data-val-required attributes in the new form element.

添加新元素之后，调用$.validator.unobtrusiv . parseelement (newElement)，它将被添加到表单中。如您的回答所示，您需要在新表单元素中设置数据val和data- valrequired属性。

So you end up with this:

结果是

//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));

Shown here: http://jsfiddle.net/ryleyb/LNjtd/2/

这里显示:http://jsfiddle.net/ryleyb/LNjtd/2/

#2

As it turns out, this can be done mostly in HTML by adding a few attributes to each form element:

事实证明，这主要是通过在HTML中添加一些属性来实现的:

A name attribute
一个名称属性
data-val="true"
data-val = " true "
data-val-required="message"
data-val-required = "消息"

Like so:

像这样:

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

Then the form just needs to be re-parsed via JS:

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

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

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

#3

I think you had something more simple wrong - like your find('.date') wasn't actually finding anything. Because otherwise, your code looks quite reasonable to me. Here is an example of it working as you expected: http://jsfiddle.net/ryleyb/LNjtd/

我认为你有一些更简单的错误——比如你的发现(“。日期”)实际上并没有找到任何东西。否则，您的代码在我看来是相当合理的。这里有一个示例，它可以像您期望的那样工作:http://jsfiddle.net/ryleyb/LNjtd/

I was able to validate the code correctly with this:

我可以用以下代码正确地验证代码:

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

#1