jquery - Validation in calling partial View with ajax? -

public personviewmodel()     {         children = new list<childviewmodel>();     }      [required(errormessage = "required!")]     public string fname { get; set; }      [required(errormessage = "required!")]     public string lname { get; set; }      public list<childviewmodel> children{ get; set; }  }      public class childviewmodel  {     [required(errormessage = "required!")]     public string fname { get; set; }      [required(errormessage = "required!")]     public int age { get; set; }  } 

my controller

    public actionresult index()     {         return view();     }     [httppost]     public actionresult index(personviewmodel person)     {         if (!modelstate.isvalid)         {             return view(person);         }         return view();     }     public actionresult addchildbox(personviewmodel person,int id)     {         viewbag.counter = id;         return partialview("view");     }  } 

i calling partial view through ajax create fields child

    <script type="text/javascript">     var num = 0;     $("#addchildbtn").click(function () {          $.ajax({             type: 'get',             url: '@url.content("~/home/addchildbox/")',             data: {                 id: num              },             datatype: 'html',             success: function (result) {                 $('#fields').append(result);                 num = num + 1;             }         });     });  </script> 

in view show children code

 @if (model != null )  {     (int = 0; model.child.count>i;i++ )     {         @html.action("addchildbox", "home", new { id = })     }  } 

and partial view

@model webapplication4.models.personviewmodel  @{     int = viewbag.counter; } <div class="form-group">     @html.labelfor(model => model.child[i].fname, htmlattributes: new { @class = "control-label col-md-2" })     <div class="col-md-10">         @html.editorfor(model => model.child[i].fname, new { htmlattributes = new { @class = "form-control" } })         @html.validationmessagefor(model => model.child[i].fname, "", new { @class = "text-danger" })     </div> </div> <div class="form-group">     @html.labelfor(model => model.child[i].age, htmlattributes: new { @class = "control-label col-md-2" })     <div class="col-md-10">         @html.editorfor(model => model.child[i].age, new { htmlattributes = new { @class = "form-control" } })         @html.validationmessagefor(model => model.child[i].age, "", new { @class = "text-danger" })     </div> </div> 

this works, when delete person addchildbox action method parameters, validation messages partial view fields not work. not use in action , why need it? confused , can explain me happen in code?

there number of issues implementation. reason not validation dynamically added content the validator parsed when view first rendered , knows nothing of new content. need re-parse validator after have appended new content using

$('form').data('validator', null); $.validator.unobtrusive.parse($('form')); 

your partial view not give true 2-way model binding , recommend use begincollectionitem helper render partial each item (refer article example). helper replaces zero-based indexers guid , renders additional hidden input matching index value allows non consecutive indexed collections bound (i.e. allow dynamically delete items in view).

a pure client side alternative shown in this answer.