Comment effectuer une validation côté client sur des zones de texte ajoutées dynamiquement dans un tableau ?

Comprendre le problème

Ce problème survient lorsque l'on tente d'appliquer des classes de validation à des zones de texte dynamiques dans un tableau. Le but est d'effectuer une validation sur ces zones de texte lorsque le bouton "Enregistrer" est cliqué.

Solution

Pour résoudre ce problème, il est crucial de mettre en œuvre les étapes suivantes :

1. Inclure les attributs Data-val : Attribuez les attributs data-val nécessaires aux zones de texte, ainsi que des éléments d'espace réservé pour les messages de validation. Ces attributs sont cruciaux pour la validation côté client à l'aide de jquery.validate.unobtrusive.js.
2. Objet ClsTargetInfo initial par défaut : Commencez par ajouter un objet ClsTargetInfo par défaut à la propriété TargetInfo dans votre modèle et générer son HTML dans la vue.
3. Créer un élément caché pour Indexeur : Dans la ligne du tableau, incluez un élément d'entrée masqué pour l'indexeur. Cela permet aux indexeurs non consécutifs d'être publiés et liés à la collection.
4. Copier le modèle HTML : Inspectez le code HTML généré pour la ligne du tableau. Copiez-le dans un élément masqué placé en dehors des balises du formulaire, en remplaçant tous les indexeurs par un caractère factice (#).
5. Cloner et ajouter au tableau : Dans le code JavaScript, clonez la nouvelle ligne , mettez à jour les indexeurs et ajoutez-le à la table.
6. Réparer le validateur : Après avoir ajouté la nouvelle ligne, analysez le validateur en utilisant $.validator.unobtrusive.parse(form).

Notes supplémentaires

• La validation discrète repose sur l'analyse des attributs data-val au niveau initial rendu du formulaire. Ainsi, une nouvelle analyse est nécessaire lors de l'ajout de contenu dynamique.
• L'entrée cachée de l'indexeur permet la suppression de n'importe quelle ligne de la collection.
• Envisagez d'utiliser CSS au lieu de styles en ligne pour une meilleure maintenabilité et les performances.
• Utilisez des vues partielles (assistant BeginCollectionItem) pour une maintenabilité plus facile lors de l'ajout de lignes uniquement sur le client côté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!