Validation ASP.NET MVC à l’aide du plugin qTip jQuery

J’utilise la solution trouvée ici pour afficher les erreurs de validation côté client dans une info-bulle à l’aide du plugin qTip jQuery. Cette solution fonctionne très bien pour la validation côté client, mais j’aimerais pouvoir afficher les erreurs de validation côté serveur de la même manière. Est-ce que quelqu’un sait comment afficher les erreurs de validation côté serveur dans les info-bulles en utilisant qTip?

Merci

S’il y a une erreur de validation côté serveur, lors du chargement de la page, il y aura un élément span avec l’erreur ‘field-validation-error’ afin que nous puissions simplement passer en boucle sur tous les éléments de cette classe, extraire le contenu ou le message d’erreur, et l’afficher dans une info-bulle.

$(document).ready(function () { // Run this function for all validation error messages $('.field-validation-error').each(function () { // Get the name of the element the error message is intended for // Note: ASP.NET MVC replaces the '[', ']', and '.' characters with an // underscore but the data-valmsg-for value will have the original characters var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_'); var corners = ['left center', 'right center']; var flipIt = $(inputElem).parents('span.right').length > 0; // Hide the default validation error $(this).addClass('Hidden'); // Show the validation error using qTip $(inputElem).filter(':not(.valid)').qtip({ content: { text: $(this).text() } , // Set the content to be the error message position: { my: corners[flipIt ? 0 : 1], at: corners[flipIt ? 1 : 0], viewport: $(window) }, show: { ready: true }, hide: false, style: { classes: 'ui-tooltip-red' } }); }); });

Voici un article de blog qui explique comment procéder en détail.

La solution publiée par Nick Olsen fonctionne très bien! Une observation:

Le .replace () utilisé dans cette instruction ne remplace que les premières occurrences de '.' '[' et ']'

 var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_');

Pour remplacer toutes les occurrences, la ligne devrait ressembler à ceci:

 var inputElem = "#" + $(this).attr("data-valmsg-for").replace(/\./g,"_").replace(/[\[\]]/g, "_");