为表中的动态文本框设置类验证

Question

为表中的动态文本框设置类验证我想将验证类添加到表中的所有文本框中。因此，当用户单击“保存”按钮时，它将检查所有文本框。我尝试使用这个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.Value*&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; }}请帮助解决我的问题。真的很感谢你们的帮助。谢谢。

Answer 1

<script src="Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        function DeleteRow(btn) {

            //alert("delete" + btn);

            var tr = btn.closest('tr');

            tr.remove();

        }

        $(".btnsd").click(function () {

            // debugger;

            alert("hjkghk");

            divs = $('.val')

            for (ind in divs) {

                var div = divs[ind];

                if (div.value == "") {

                    div.focus();

                    return false;

                }

            }

            $('#Employertbl').append(

                                    '<tr>' +

                                        '<td> @Html.TextBox("item.employer_name", null, new { @class = "form-control val" })</td>' +

                                        '<td width="24%"> <div style="float:left; padding-right:5px;">@Html.TextBox("item.duration_From", null, new { @id = "", @placeholder = "From Date", @class = "form-control input-date datepicker val", @readonly = true })</div> ' +

                                              '<div>@Html.TextBox("item.duration_to", null, new { @id = "", @class = "form-control input-date datepicker val", @placeholder = "To Date", @readonly = true })</div></td>' +

                                        '<td> @Html.TextBox("item.designation", null, new { @class = "form-control val" })</td>' +

                                        '<td> @Html.TextBox("item.worked_skill", null, new { @class = "form-control val" })</td>' +

                                        '<td> @Html.TextBox("item.proj_handled", null, new { @class = "form-control val" })</td>' +

                                        '<td>  @Html.CheckBox("item.current_employed",new{@class = "current" })</td>' +

                                        '<td><input type="button" value="Remove" onclick="DeleteRow(this)" name="delete" class="btn blue pull-right" /> </td>' +

                                    '</tr>'

                                    );

        });

    });

</script>

<div class="table-responsive">

    <table id="Employertbl" class="table table-striped table-bordered table-hover dataTable no-footer">

        <tbody>

            <tr>

                <th>Employer Name</th>

                <th>Duration</th>

                <th>Designation</th>

                <th>Worked skill(s)</th>

                <th>Reason of change</th>

                <th>Currently Employed</th>

                <th>Action</th>

            </tr>

            <tr>

                <td>

                    <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value="">

                </td>

                <td width="24%">

                    <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date"  type="text" value="" id="dp1459328857835"></div>

                    <div> <input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date"  type="text" value="" id="dp1459328857836"></div>

                </td>

                <td>

                    <input class="form-control val" id="item_designation" name="item.designation" type="text" value="">

                </td>

                <td>

                    <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value="">

                </td>

                <td>

                    <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value="">

                </td>

                <td>

                    <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false">

                </td>

                <td>

                    <input id="myButton" type="button" value="add"  name="delete" class="btnsd bcbn">

                </td>

            </tr>

            <tr><td> <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""></td><td width="24%"> <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date"  type="text" value="" id="dp1459328857837"></div> <div><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date" type="text" value="" id="dp1459328857838"></div></td><td> <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""></td><td> <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""></td><td> <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""></td><td>  <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"></td><td><input type="button" id="myButton" value="add" name="delete" class="btnsd dfsd"> </td></tr>

            <tr><td> <input class="form-control val" id="item_employer_name" name="item.employer_name" type="text" value=""></td><td width="24%"> <div style="float:left; padding-right:5px;"><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_From" placeholder="From Date" type="text" value="" id="dp1459328857839"></div> <div><input class="form-control input-date datepicker val hasDatepicker" name="item.duration_to" placeholder="To Date"  type="text" value="" id="dp1459328857840"></div></td><td> <input class="form-control val" id="item_designation" name="item.designation" type="text" value=""></td><td> <input class="form-control val" id="item_worked_skill" name="item.worked_skill" type="text" value=""></td><td> <input class="form-control val" id="item_proj_handled" name="item.proj_handled" type="text" value=""></td><td>  <input class="current" id="item_current_employed" name="item.current_employed" type="checkbox" value="true"><input name="item.current_employed" type="hidden" value="false"></td><td><input type="button" id="myButton" value="add" name="delete" class="btnsd"> </td></tr>

        </tbody>

    </table>

</div>