分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Set class valid为表中的动态文本框设置类验证ation for dynamic textbox in a table，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Set class valid为表中的动态文本框设置类验证ation for dynamic textbox in a table？

开发过程中遇到Set class valid为表中的动态文本框设置类验证ation for dynamic textbox in a table的问题如何解决？下面主要结合日常开发的经验，给出你关于Set class valid为表中的动态文本框设置类验证ation for dynamic textbox in a table的解决方法建议，希望对你解决Set class valid为表中的动态文本框设置类验证ation for dynamic textbox in a table有所启发或帮助；

您没有data-val在文本框或用于显示验证消息的占位符元素中包括必需的属性，这些属性用于jquery.valIDate.unobtrusive.Js进行客户端验证。此外，您当前的实现方式不允许用户删除最后一行以外的任何内容，这可以通过为索引器包含隐藏输入来解决，该隐藏输入允许将非连续索引器发布并绑定到您的集合。

首先，向ClsTargeTinfo您的TargeTinfo媒体资源添加一个默认对象，然后在视图中生成其HTML

<table ID="table"> // add an ID attribute
  <thead>.....</thead>
  <tbody is="tablebody"> // add an ID attribute
    for(int i = 0; i < Model.TargeTinfo.Count; i++)
    {
      <tr>
        <td>
          @HTMl.TextBoxFor(m => m.TargeTinfo[i].Targetcolor_U, new { ID="", @class="form-control" }) // remove the unnecessary ID attribute
          @HTMl.ValIDationmessageFor(m => m.TargeTinfo[i].Targetcolor_U)
          // Add the following hIDden input to only one column in the row
          <input type="hIDden" name="TargeTinfo.Index" value=@i />
        </td>
        <td>
          @HTMl.TextBoxFor(m => m.TargeTinfo[i].Targetcolor_V, new { ID="", @class="form-control" }) // remove the unnecessary ID attribute
          @HTMl.ValIDationmessageFor(m => m.TargeTinfo[i].Targetcolor_V)
        </td>
        .... // other columns
      </tr>
    }
  </tbody>
</table>

然后检查它为<tr>元素生成的HTML，看起来应该像

<tr>
  <td>
    <input data-val="true" data-val-required="The Targetcolor_U fIEld is required" name="TargeTinfo[0].Targetcolor_U" type="text" value="">
    <span class="fIEld-valIDation-valID errorText" data-valmsg-for="TargeTinfo[i].Targetcolor_U" data-valmsg-replace="true"></span>
    <input type="hIDden" name="TargeTinfo.Index" value="0" />
  </td>
  ....
</tr>

并将其复制到放置在 form标记之外的隐藏元素内，并将索引器的所有实例替换为虚拟字符，从而name=”TargeTinfo[0].Targetcolor_U”变为name=”TargeTinfo[#].Targetcolor_U”），还替换value隐藏输入的属性，从而value=”0”使其成为value=”#”

<table ID="newrow" style="display:none">
  .... // copy the tr element and its contents here
</table>

然后脚本看起来像

var form = $('form'); // or use the ID if you have given the form an ID
var newrow= $('#newrow');
var tablebody = $('#tablebody'); // modify to suit your ID
$("#btnAddTarget").click(function() {
  var index = (new Date()).getTime(); // unique indexer
  var clone = newrow.clone(); // clone the new row
  clone.HTML($(clonE).HTML().replace(/#/g, indeX)); // update the indexer of the clone
  var row = clone.find('tr');
  tablebody.append(row); // add the new row to the table
  // Reparse the valIDator
  form.data('valIDator', null);
  $.valIDator.unobtrusive.parse(form);
});

旁注：

非侵入式验证通过在data-val首次呈现表单时解析属性来工作。添加动态内容时，有必要按照脚本的最后两行中的指示重新解析验证器。为索引器添加隐藏输入后，您可以删除集合中的任何行，因此不再需要删除“删除”按钮，这将为用户带来更好的体验。而是使用内联样式，例如，

应使用CSS而不是，而应#table td { padding: 0; }在.CSS文件中使用纯粹在客户端添加行可提供最佳性能，但难以维护。如果在属性上添加或更改任何验证属性（例如，您以后可能会添加 [StringLength]属性），则需要更新HTML以适合。作为替代方案，您可以考虑使用 BeginCollectionItem帮助器，这意味着您拥有一个局部视图（代表一个表行）。对于现有项，您可以对新行foreach使用@HTMl.Partial()和循环，并使用AJAX调用返回部分视图的控制器方法，并更新DOM。

解决方法

我想向表内的所有文本框添加验证类。因此，当用户单击“保存”按钮时，它将选中所有文本框。

我尝试对此使用此jQuery：

 $('#tbTargetDetails tr').each(function () {
            $(this).find('td input:text').each(function (i,a) {
                // get each of the textbox and add validation class to it
            });
        });

我正在使用具有类input.input-validation-error的 MVC 5，jquery-1.10.2.js，jquery-1.10.2.min.js，jquery.validate *和Site.css

在我的模型中：

 public class ClsTargeTinfo
    {
        public String Itemnumber_Target { get; set; }
        [required]
        public String TargetColor_U { get; set; }
        [required]
        public String TargetColor_V { get; set; }
        [required]
        public String D90Target_U { get; set; }
        [required]
        public String D90Target_V { get; set; }
        [required]
        public String D10Target_U { get; set; }
        [required]
        public String D10Target_V { get; set; }
        [required]
        public String Thickness { get; set; }
        [required]
        public String FilmWidth { get; set; }
        [required]
        public String TargetDate { get; set; }
    }

我将上述模型称为另一个模型：

public class abc
{
 public IList<ClsTargeTinfo> TargeTinfo { get; set; }
}

下面是我添加新行时的代码：

        $("#btnAddTarget").on("click",function (event) {
            AddTargetItem(jQuery('#txtTargetColorU').val(),jQuery('#txtD90TargetU').val(),jQuery('#txtD10TargetU').val(),jQuery('#txtTargetColorV').val(),jQuery('#txtD90TargetV').val(),jQuery('#txtD10TargetV').val(),jQuery('#txtThickness').val(),jQuery('#txtFilmWidth').val(),jQuery('#TargetDate').val());
});

function AddTargetItem(TargetColor_U,D90Target_U,D10Target_U,TargetColor_V,D90Target_V,D10Target_V,Thickness,FilmWidth,TargetDatE) {
        var rowCount = $('#tbTargetDetails tr').length;
        //minus 1 row for header
        rowCount = rowCount - 2;

        var rowCountBil = rowCount + 1;

        var row = '<tr style="BACkground-color:#ffffff;" id="tr_' + rowCount + '">';
        row += '<td style="font-weight:bold;padding-left:5px;padding-top:0px;padding-bottom:0px;padding-right:0px;vertical-align:middle">' + rowCountBil + '</td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__TargetColor_U" name="TargeTinfo[' + rowCount + '].TargetColor_U" type="text" value="' + TargetColor_U + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__TargetColor_V" name="TargeTinfo[' + rowCount + '].TargetColor_V" type="text" value="' + TargetColor_V + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__D90Target_U" name="TargeTinfo[' + rowCount + '].D90Target_U" type="text" value="' + D90Target_U + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__D90Target_V" name="TargeTinfo[' + rowCount + '].D90Target_V" style="text-align:center;" type="text" value="' + D90Target_V + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__D10Target_U" name="TargeTinfo[' + rowCount + '].D10Target_U" style="text-align:center;" type="text" value="' + D10Target_U + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__D10Target_V" name="TargeTinfo[' + rowCount + '].D10Target_V" style="text-align:center;" type="text" value="' + D10Target_V + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__Thickness" name="TargeTinfo[' + rowCount + '].Thickness" style="text-align:center;" type="text" value="' + Thickness + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__FilmWidth" name="TargeTinfo[' + rowCount + '].FilmWidth" style="text-align:center;" type="text" value="' + FilmWidth + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px"><input class="form-control" id="TargeTinfo_' + rowCount + '__TargetDate" name="TargeTinfo[' + rowCount + '].TargetDate" style="text-align:center;" type="text" value="' + TargetDate + '" /></td>';
        row += '<td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;vertical-align:top;"><img id="imgRemoveTarget" alt="Item Lookup" src="/Content/images/trashcan.png" style="cursor:pointer;width:32px;height:29px;" class="deleteLink" /></td>';
        row += '</tr>';

        //Hide the previous delete button
        $('#tbTargetDetails tr:last .deleteLink').hide('fast');

        $('#tbTargetDetails tr:last').after(row);
    }