设置验证类为表中的动态文本框 [英] Set class validation for dynamic textbox in a table
问题描述
我有具有动态文本框的一个行的表。下面的例子：
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 *放大器;的site.css是具有类的 input.input验证错误的
在我的模型：
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; }
}
下面是当我加入新行的code：
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);
}
请帮忙解决我的问题。真的AP preciate你的球员的帮助。
谢谢你。
Please help to solve my issue. Really appreciate your guys help. Thank you.
推荐答案
您没有包括必要的数据-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>
然后检查它生成的HTML ＆LT; TR＆GT; 元素，它应该是这个样子。
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>
和复制被放置的之外表单标签并替换索引的所有实例的虚拟角色让一个隐藏的元素中的名称=TargetInfo [0]。 TargetColor_U变成 NAME =TargetInfo [＃]。TargetColor_U），并同时更换值隐藏的输入的属性，这样值=0变成值=＃
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);
});
旁注：
- 不显眼的审定工作通过解析
数据-VAL属性
当表单首次呈现。当您添加动态内容，它是
必要重新解析验证器在最后2行所指示
脚本。 - 隐藏的输入为索引中添加允许你
删除任何行集合中，所以删除删除按钮
不再需要，将带给用户更好的体验。 - 相反，使用内联样式，使用CSS代替，例如，而不是
＆LT; TD风格=填充左：0像素，填充顶：0像素;填充底：0像素; padding-右：0像素＆GT;，你应该使用#table TD {填充：0; }在的.css文件 - 同时加入了行纯粹的客户端提供了最好的性能，
其难以维持。如果您添加或更改任何验证
在你的属性属性（例如，您可能以后添加[StringLength]属性），你将需要更新的html
适合。作为替代方案，可以考虑使用
BeginCollectionItem 的帮手，这意味着你有一个部分
视图（重presenting表行）。对于现有的项目，您可以使用的foreach循环与@ Html.Partial（）和新行，你用ajax
调用的控制器方法返回一个局部视图，和
更新DOM
- Unobtrusive validation works by parsing the
data-valattributes 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.cssfile - 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 aforeachloop 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屋！
