大佬教程收集整理的这篇文章主要介绍了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
});
});
我正在使用MVC 5,jquery-1.10.2.js,jquery-1.10.2.min.js,jquery.validate *&具有类input.input-validation-error的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);
}
首先,在TargeTinfo属性中添加一个默认的ClsTargeTinfo对象,然后在视图中生成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,@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>
并将其复制到位于表单标记之外的隐藏元素中,并用虚拟字符替换索引器的所有实例,因此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,而不是< td style =“padding-left：0px; padding-top：0px; padding-bottom：0px; padding-right：0px”>,you应该使用#table td {padding：0;在你的.css文件中
>虽然添加纯粹的客户端行提供了最佳性能,
它很难维护.如果您添加或更改任何验证
属性上的属性(例如,您稍后可能会添加一个
[StringLength]属性),您需要将html更新为
适合.作为替代方案,您可以考虑使用
BeginCollectionItem助手,这意味着你有一个部分view(表示一行表).对于现有项目,您使用aforeach循环使用@ Html.Partial(),对于新行,使用ajax调用返回局部视图的控制器方法,和更新DOM
以上是大佬教程为你收集整理的jquery – 为表中的动态文本框设置类验证全部内容，希望文章能够帮你解决jquery – 为表中的动态文本框设置类验证所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。