如何对表中动态添加的文本框执行客户端验证？

理解问题

尝试将验证类应用于表中的动态文本框时会出现此问题。目标是在单击“保存”按钮时对这些文本框执行验证。

解决方案

要解决此问题，实施以下步骤至关重要：

1. 包含 Data-val 属性： 分配必要的data-val 属性到文本框，以及用于验证消息的占位符元素。这些属性对于使用 jquery.validate.unobtrusive.js 进行客户端验证至关重要。
2. 初始默认 ClsTargetInfo 对象： 首先将默认 ClsTargetInfo 对象添加到模型中的 TargetInfo 属性，然后在视图中生成其 HTML。
3. 创建一个隐藏元素索引器： 在表行中，包含索引器的隐藏输入元素。这允许将非连续索引器发布并绑定到集合。
4. 复制 HTML 模板： 检查为表行生成的 HTML。将其复制到表单标记外部的隐藏元素内，用虚拟字符 (#) 替换所有索引器。
5. 克隆并附加到表： 在 JavaScript 代码中，克隆新行，更新索引器，并将其附加到表中。
6. 重新解析验证器： 添加新行后，使用 $.validator.unobtrusive.parse(form) 重新解析验证器。

附加说明

• Unobtrusive 验证依赖于解析 data-val 属性在表单的初始呈现时。因此，添加动态内容时需要重新解析。
• 索引器的隐藏输入允许删除集合中的任何行。
• 考虑使用 CSS 而不是内联样式以获得更好的可维护性和性能。
• 纯粹在客户端添加行时，利用部分视图（BeginCollectionItem 帮助器）更容易维护侧面。

以上是如何对表中动态添加的文本框执行客户端验证？的详细内容。更多信息请关注PHP中文网其他相关文章！