How to Apply Class Validation to Dynamic Textboxes in a Table Using jQuery Unobtrusive Validation?

Setting Class Validation for Dynamic Textboxes in a Table

Understanding the Problem

You have a dynamic table with textboxes, and you want to apply class validation to all these textboxes. jQuery's unobtrusive validation is not registering the added textboxes, resulting in the validation not working.

Addressing the Issue

To resolve this, you need to:

• Add data attributes: Include the necessary data-val attributes to the textboxes.
• Generate placeholder elements: Create placeholder elements for displaying validation messages.
• Allow non-consecutive indexers: Include a hidden input for the indexer to enable non-consecutive indexers for the posted collection.

Updated HTML with Indexer Hidden Input

@for (int i = 0; i < Model.TargetInfo.Count; i++)
{
    <tr>
        <td>
            @Html.TextBoxFor(m => m.TargetInfo[i].TargetColor_U, new { id = "", @class = "form-control" })
            @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_U)
            <input type="hidden" name="TargetInfo.Index" value=@i />
        </td>
        <!-- Other columns with similar markup -->
    </tr>
}

Updated JavaScript with Non-Consecutive Indexers

var form = $('form');
var newrow = $('#newrow');
var tablebody = $('#tablebody');

$("#btnAddTarget").click(function() {
    var index = (new Date()).getTime();
    var clone = newrow.clone();
    clone.html($(clone).html().replace(/#/g, index));
    var row = clone.find('tr');
    tablebody.append(row);

    // Reparse the validator using unobtrusive validation
    form.data('validator', null);
    $.validator.unobtrusive.parse(form);
});

Additional Tips

• Unobtrusive validation re-parsing is required after adding dynamic content.
• Hidden indexers enable deleting non-consecutive rows.
• Use CSS for styling instead of inline styles.
• Consider using partial views for maintainability.

The above is the detailed content of How to Apply Class Validation to Dynamic Textboxes in a Table Using jQuery Unobtrusive Validation?. For more information, please follow other related articles on the PHP Chinese website!