jQuery客戶端驗證不起作用

Question

我正在嘗試使用jquery.validate.unotrusive.js插件來動態創建表單字段，例如：

var message = $("<textarea id='test'></textarea>");
$(message).attr("data-val", "true")
.attr("data-val-number", "The field CustomerId must be a number.")
.attr("data-val-required", "The CustomerId field is required.");

var span = $('<span class="field-validation-valid" data-valmsg-replace="true"></span>');
$(span).attr("data-valmsg-for", $(message).attr("id"));

var form = $("<form action='url'></form>");

$(form).append(message,span);

我同時嵌入了jquery.validate和jquery.validate.unobtrusive js文件，但textarea字段在表單提交時未通過驗證。 有人可以告訴我這里出了什么問題嗎？

Answer 1

在將新元素動態添加到DOM時，您將需要重新解析非侵入式驗證規則以進行注冊。 因此，將表單添加到DOM后，調用$.validator.unobtrusive.parse方法將這些更改通知客戶端驗證框架：

...
$(form).append(message, span);
$.validator.unobtrusive.parse(form);

並且，如果僅將輸入元素動態添加到已為其注冊了客戶端驗證的DOM中的現有表單中，則還需要刪除此表單的先前規則：

// adding some form elements to an existing form ...

$(form).removeData('validator').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);