Question

I’m developing a dynamic form where a user can click a button, and then a new set of controls will be added to the form, using jQuery Template plugin. Code below:

@using (Html.BeginForm("Index2", "Home", FormMethod.Post, new { id = "EditForm" }))
{ 
@Html.ValidationSummary(false)

@Html.LabelFor(m => m.Title)
@Html.TextBoxFor(m => m.Title)

<p>
    <input type="button" name="Add Author", value="Add Author" />
</p>

<div id="myElements">
@for (int i = 0; i < @Model.Authors.Count; i++)
{
    <div class="myElement">
        @Html.LabelFor(m => m.Authors[i].Id)  
        @Html.TextBoxFor(m => m.Authors[i].Id)
    </div>
    <div class="myElement">
        @Html.LabelFor(m => m.Authors[i].Name)  
        @Html.TextBoxFor(m => m.Authors[i].Name)
    </div>
    <br style="clear:both;" />
}
</div>

<br />
<input type="submit" name="Submit" value="Submit" />
}

<script id="AuthorTemplate" type="text/x-jquery-tmpl">
<div class="myElement">
    <input 
            data-val="true" 
            data-val-number="The field Author Id must be a number." 
            data-val-required="Author Id is required!" id="Authors_${value}__Id" 
            name="Authors[${value}].Id" 
            type="text" value="" class="valid" />
</div>
<div class="myElement">
    <input 
            data-val="true" 
            data-val-required="Author Name is required!" 
            id="Authors_${value}__Name" 
            name="Authors[${value}].Name" 
            type="text" value="" />
</div>
<br style="clear:both;" />
</script>

<script type="text/javascript">
$(document).ready(function () {
    $('input[name="Add Author"]').click(function (evt) {
        evt.preventDefault();
        $('#AuthorTemplate').tmpl({ value: $('input[name^="Authors"]').length / 2 }).appendTo('#myElements');

// Re-register unobtrusive validation
    $.validator.unobtrusive.parse('#myElements');
    });
});
</script>

The script works fine, however, form is not validating the newly added value, although I’ve re-initialized unobtrusive validation.

Any ideas?

Thanks

Answer 1

Actually, the right way to do it is:

$.validator.unobtrusive.parse('#myElements');

However, the above is not enough. I had to make use of the following plugin to make sure the jQuery Validation plugin is now aware of the new rules/messages:

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

Good luck,