向 ASP 中动态创建的元素添加 jQuery 验证器规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9386971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding jQuery validator rules to dynamically created elements in ASP
提问by CBarr
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 Validation 1.9.0 和不显眼的插件
采纳答案by Ryley
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:
现在我了解了 Unobtrusive 插件方面的情况（我理解它与 ASP.NET 以某种方式相关），这是您需要做的：
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.unobtrusive.parseElement(newElement)它将被添加到表单中。正如您的回答所建议的那样，您需要在新的表单元素中设置 data-val 和 data-val-required 属性。
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/
回答by CBarr
As it turns out, this can be done mostly in HTML by adding a few attributes to each form element:
事实证明，这可以通过向每个表单元素添加一些属性来主要在 HTML 中完成：
- A
nameattribute data-val="true"data-val-required="message"
- 一个
name属性 data-val="true"data-val-required="message"
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");
回答by Ryley
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/
我认为你有一些更简单的错误 - 就像你find('.date')实际上没有找到任何东西。因为否则，你的代码对我来说看起来很合理。这是它按预期工作的示例：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'
}
}
);?
