Définir la validation de classe pour la zone de texte dynamic dans une table

Vous n’incluez pas les atsortingbuts data-val nécessaires dans data-val jquery.validate.unobtrusive.js de jquery.validate.unobtrusive.js , ni les éléments d’espace réservé pour afficher les messages de validation, qui sont utilisés par jquery.validate.unobtrusive.js pour effectuer la validation côté client. En outre, votre implémentation actuelle ne permet pas à l’utilisateur de supprimer quoi que ce soit d’autre que la dernière ligne pouvant être résolue en incluant une entrée masquée pour l’indexeur qui permet aux indexeurs non consécutifs d’être publiés et liés à votre collection.

Commencez par append un object ClsTargetInfo par défaut à votre propriété TargetInfo et générez son TargetInfo HTML dans la vue.

  // add an id atsortingbute ..... // add an id atsortingbute 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 atsortingbute @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 atsortingbute @Html.ValidationMessageFor(m => m.TargetInfo[i].TargetColor_V) 
  

Puis inspectez le code html qu’il génère pour l’élément

qui devrait ressembler à quelque chose comme

       ....  

et copiez-le dans un élément masqué placé en dehors des balises de formulaire et remplacez toute instance de l’indexeur par un caractère factice, ainsi name="TargetInfo[0].TargetColor_U" devient name="TargetInfo[#].TargetColor_U" ), et remplace également l’atsortingbut value de l’entrée masquée, donc value="0" devient value="#"

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

Ensuite, le script ressemblera à

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

Notes de côté:

1. La validation non intrusive fonctionne en analysant les atsortingbuts data-val lors du premier rendu du formulaire. Lorsque vous ajoutez du contenu dynamic, il est nécessaire de ré-parsingr le validateur comme indiqué dans les 2 dernières lignes du script.
2. L’ajout de l’entrée masquée pour l’indexeur vous permet de supprimer n’importe quelle ligne de la collection. La suppression du bouton “supprimer” n’est donc plus nécessaire et donnera à l’utilisateur une meilleure expérience.
3. Plutôt que d’utiliser des styles inline, utilisez plutôt css, par exemple, plutôt que

   , vous devez utiliser #table td { padding: 0; } #table td { padding: 0; } dans votre fichier .css

4. Bien que l’ajout des lignes uniquement du côté client donne les meilleures performances, il est difficile à maintenir. Si vous ajoutez ou modifiez des atsortingbuts de validation sur vos propriétés (par exemple, vous pourrez append un atsortingbut [SsortingngLength] ), vous devrez mettre à jour le [SsortingngLength] . Sinon , vous pouvez envisager d’utiliser l’assistant BeginCollectionItem, ce qui signifie que vous disposez d’une vue partielle (représentant une ligne de tableau). Pour les éléments existants, vous utilisez une boucle foreach avec @Html.Partial() et pour les nouvelles lignes, vous utilisez ajax pour appeler une méthode de contrôleur qui renvoie une vue partielle et met à jour le DOM.

   
 
 
 
 
Employer Name
 
Duration
 
Designation
 
Worked skill(s)
 
Reason of change
 
Currently Employed
 
Action