Set class validation for dynamic textbox in a table

Question

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

I ad

Answer 1

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.

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

 // add an id attribute
  ..... // add an id attribute
    for(int i = 0; i < Model.TargetInfo.Count; i++)
    {
      
        .... // other columns
      
    }
  

  

        

          @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
          
        
        

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

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

  
    
    
    
  
  ....

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="#"

  .... // copy the tr element and its contents here

Then the script will look like

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

Side notes:

1. 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.
2. 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.
3. Rather that using inline styles, use css instead, for example, rather than , you should use #table td { padding: 0; } in your .css file
4. 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