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