如何使用 JavaScript 和 jQuery 验证表中动态添加的文本框？

如何向表中的动态文本框添加验证

理解挑战

您有一个包含动态生成的包含文本框的行的表。 目标是向表中的所有文本框添加 CSS 类（例如 input-validation-error），以便在用户单击“保存”按钮时进行客户端验证。

实现客户端验证对于动态文本框

1。确保正确的 HTML 结构：

要启用客户端验证，您必须包含必填字段的特定 data-val 属性和验证消息的消息占位符。此外，隐藏输入对于添加或删除行时维护索引器至关重要。

2.设置 JavaScript 函数：

function AddTargetItem(TargetColor_U, D90Target_U, D10Target_U, TargetColor_V, D90Target_V, D10Target_V, Thickness, FilmWidth, TargetDate)  {
  var rowCount = $('#tbTargetDetails tr').length;
  var rowCountBil = rowCount + 1;

  var row = '<tr>

3.处理动态添加的行：

添加新行时，需要重新解析 jQuery 验证非侵入性库。

  // Reparse the validator
  form.data('validator', null);
  $.validator.unobtrusive.parse(form); 

4.删除行：

您可以选择通过合并事件处理程序或利用每行中的专用按钮来处理删除行。更新 AddTargetItem 函数以考虑删除行或重新评估索引等场景。

其他提示：

• 考虑使用 CSS 进行样式设置而不是内联样式。
• 探索替代方案诸如使用部分视图生成行等方法，在添加/更改验证时提供更多可维护性属性。
• 请记住检查您的模型、视图和 JavaScript 函数是否有错误，并确保它们与您的预期逻辑一致。

以上是如何使用 JavaScript 和 jQuery 验证表中动态添加的文本框？的详细内容。更多信息请关注PHP中文网其他相关文章！