为表格中的动态文本框设置类验证 [英] Set class validation for dynamic textbox in a table

查看：27 发布时间：2021/11/29 8:22:34 jquery css asp.net-mvc validation

本文介绍了为表格中的动态文本框设置类验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个包含一行动态文本框的表格.下面的例子:

I have a table that have a row of dynamic textbox. Example below:

我通过单击 [+] 添加新目标在表中添加行，将出现下面的屏幕:

I add the row in the table by clicking the [+] Add New Target a it below screen will appear:

我想向表格内的所有文本框添加验证类.所以当用户点击保存按钮时，它会检查所有的文本框.

I want to add validation class to all text box inside the table. So when the user click the save button, it will check all the text box.

我尝试使用这个 jquery:

I try to use this jquery to this:

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

我正在使用 MVC 5、jquery-1.10.2.js、jquery-1.10.2.min.js、jquery.validate* &具有 input.input-validation-error

I'm using MVC 5, jquery-1.10.2.js, jquery-1.10.2.min.js, jquery.validate* & Site.css that have class input.input-validation-error

在我的模型中:

 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; }
    }

我在另一个模型中调用上面的模型:

I call above model inside another model:

public class abc
{
 public IList<ClsTargetInfo> TargetInfo { get; set; }
}

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

Below is the code when i adding the new row:

        $("#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);
    }

请帮助解决我的问题.真的很感谢你们的帮助.谢谢.

Please help to solve my issue. Really appreciate your guys help. Thank you.

推荐答案

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

You are not including the necessary data-val attributes to the textboxes, or the placeholder elements for displaying the validation messages, which are used by jquery.validate.unobtrusive.js to do client side validation. In addition, your current implementation does not allow the user to remove anything other that the last row which can be solved by including a hidden input for the indexer which allows non consecutive indexers to be posted and bound to your collection.

首先将一个默认的 ClsTargetInfo 对象添加到您的 TargetInfo 属性并在视图中生成其 html

First start by adding one default ClsTargetInfo object to your TargetInfo property and generate its html in the view

<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，它应该看起来像

Then inspect the html it generates for the <tr> element which should look something like

<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>

并将其复制到位于表单标签外部的隐藏元素内，并用虚拟字符替换索引器的所有实例，以便 name="TargetInfo[0].TargetColor_U" 变为 name="TargetInfo[#].TargetColor_U")，并且还替换了隐藏输入的 value 属性，因此 value="0" 变成了 value="#"

and copy it inside a hidden element that is placed outside the form tags and replace all instance of the indexer with a dummy character so name="TargetInfo[0].TargetColor_U" becomes name="TargetInfo[#].TargetColor_U"), and also replace the value attribute of the hidden input so value="0" it becomes 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，而不是 <td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px">，你应该使用 #table td { padding: 0;} 在你的 .css 文件中
虽然仅在客户端添加行可提供最佳性能，它很难维护.如果您添加或更改任何验证属性上的属性(例如，您稍后可能会添加[StringLength] 属性)，您需要将 html 更新为适合.作为替代方案，您可以考虑使用BeginCollectionItem 帮助器，这意味着您有一个部分视图(代表表格行).对于现有项目，您使用foreach 使用 @Html.Partial() 循环，对于新行，您使用 ajax调用返回局部视图的控制器方法，以及更新 DOM

Unobtrusive validation works by parsing the data-val attributes when the form is first rendered. When you add dynamic content, it is necessary to re-parse the validator as indicated in the last 2 lines of the script.
The addition of the hidden input for the indexer allows you to delete any row in the collection, so removing the "delete" button is no longer necessary and will give the user a better experience.
Rather that using inline styles, use css instead, for example, rather than <td style="padding-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px">, you should use #table td { padding: 0; } in your .css file
While adding the rows purely client side gives the best performance, its difficult to maintain. If you add or change any validation attributes on your properties (for example you might later add a [StringLength] attribute), you will need to update the html to suit. As an alternative, you can consider using the BeginCollectionItem helper which means you have one partial view (representing a table row). For existing items, you use a foreach loop with @Html.Partial() and for new rows, you use ajax to call a controller method that return a the partial view, and update the DOM

这篇关于为表格中的动态文本框设置类验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为表格中的动态文本框设置类验证 [英] Set class validation for dynamic textbox in a table

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为表格中的动态文本框设置类验证 [英] Set class validation for dynamic textbox in a table

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭