Comment appliquer la validation de classe aux zones de texte dynamiques dans un tableau à l'aide de la validation discrète jQuery ?

Définition de la validation de classe pour les zones de texte dynamiques dans un tableau

Comprendre le problème

Vous disposez d'un tableau dynamique avec des zones de texte et vous souhaitez appliquer une classe validation de toutes ces zones de texte. La validation discrète de jQuery n'enregistre pas les zones de texte ajoutées, ce qui entraîne un dysfonctionnement de la validation.

Résoudre le problème

Pour résoudre ce problème, vous devez :

• Ajouter des attributs de données : Incluez les attributs data-val nécessaires au zones de texte.
• Générer des éléments d'espace réservé : Créez des éléments d'espace réservé pour afficher les messages de validation.
• Autoriser les indexeurs non consécutifs : Incluez une entrée masquée pour le indexeur pour activer les indexeurs non consécutifs pour la collection publiée.

HTML mis à jour avec Entrée cachée de l'indexeur

@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>
}

JavaScript mis à jour avec des indexeurs non consécutifs

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

Conseils supplémentaires

• Une nouvelle analyse de validation discrète est requise après l'ajout de contenu dynamique .
• Les indexeurs cachés permettent de supprimer des fichiers non consécutifs lignes.
• Utilisez CSS pour le style au lieu des styles en ligne.
• Envisagez d'utiliser des vues partielles pour la maintenabilité.

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!