Comment puis-je obtenir la validation jQuery pour produire le même balisage que la validation ASP.NET MVC côté serveur?

Question

Je développe une application web en utilisant ASP .NET MVC 1.0 et jQuery (y compris le validation plugin). Le balisage côté serveur pour une « entité d'édition » typique se calcule comme suit

<label for="FirstName">FirstName:</label> 
<%= Html.TextBox("FirstName", Model.FirstName) %> 
<%= Html.ValidationMessage("FirstName") %> 

Lorsque des données non valide est affiché dans le champ FirstName, le résultat HTML est

<label for="FirstName">FirstName:</label> 
<input type="text" value="" name="FirstName" id="FirstName" class="input-validation-error text"> 
<span class="field-validation-error">Please enter the first name.</span> 

Ce qui est exactement ce que vous attendre de ASP .NET MVC hors de la boîte. J'ajoute maintenant la validation côté client avec jQuery, et je voudrais qu'elle se comporte exactement de la même manière - ie le contrôle d'entrée reçoit une classe d'entrée-validation-erreur et une plage est ajoutée avec une classe de field-validation-error, pour afficher le message d'erreur.

Je suis presque là, mais pas tout à fait. L'utilisation de l'option errorElement permet au validateur de créer une plage pour le message d'erreur, plutôt qu'une étiquette. L'utilisation de l'option errorClass signifie que l'élément input reçoit une classe d'entrée-validation-error. Le problème que j'ai, c'est que le message d'erreur aussi obtient une classe d'entrée-validation-erreur, et je veux qu'il ait une erreur de validation de champ. J'ai essayé d'utiliser les fonctions highlight et unhighlight pour corriger cela, mais dès que je commence à jouer avec les classes sur l'étendue, la validation elle-même cesse de fonctionner et envoie simplement le formulaire au serveur.

Quelqu'un a-t-il des idées sur la façon dont je peux résoudre ce problème? Merci.

Answer 1

On dirait que le problème que j'avais été causée par tripoter la classe appliquée aux éléments d'entrée et d'erreur. Le plugin recherche les éléments de cette classe afin d'afficher ou de masquer le message d'erreur, ainsi que le nombre d'éléments non valides. Pour éviter ces problèmes, j'ai arrêté d'utiliser la ligne errorClass: 'input-validation-error' montrée dans la réponse de Darin, et je l'ai laissé comme valeur par défaut. Dans la fonction errorPlacement, j'attache la bonne classe aux éléments d'erreur et d'entrée, ainsi que l'insertion du message au bon endroit dans le DOM. Tout cela semble fonctionner maintenant. Le code JavaScript est le suivant:

$('form').validate({ 
errorElement: 'span', 
errorPlacement: function(error, element) { 
    error.insertAfter(element); 
    error.addClass('field-validation-error'); 
    element.addClass('input-validation-error'); 
},   
rules: { 
    FirstName: { 
     required: true 
    } 
}, 
messages: { 
    FirstName: { 
     required: 'Please enter the first name.'  
    } 
} 

});

Merci à Darin pour sa contribution car elle m'a indiqué dans la bonne direction.

Answer 2

Commander le rappel errorPlacement:

$('form').validate({ 
    errorClass: 'input-validation-error', 
    errorElement: 'span', 
    errorPlacement: function(error, element) { 
     // Insert and manipulate the span element here: 
     error.insertAfter(element) 
      .removeClass('input-validation-error') 
      .addClass('field-validation-error'); 
    },   
    rules: { 
     FirstName: { 
      required: true 
     } 
    }, 
    messages: { 
     FirstName: { 
      required: 'Please enter the first name.'  
     } 
    } 
});