Une manière élégante de combiner la validation ASP.NET avec JQuery

Question

Comment combiner au mieux JQuery avec le modèle de validation côté client ASP.NET?

J'ai généralement évité d'implémenter le modèle de validation ASP.NET car il semble toujours exagéré pour ce que je faisais. Pour le site sur lequel je travaille actuellement, je ne fais que collecter des données utilisateur non critiques et je n'ai besoin que d'une validation de base. Je ne veux pas que les messages apparaissent dans le DOM ou quelque chose comme ça. J'ai toujours eu du mal à obtenir ça de toute façon.

Mais je dois maintenant mettre en œuvre quelque chose d'un peu plus élégant. Ce dont je veux profiter dans JQuery, ce sont des expressions de recherche intelligentes comme 'dites-moi si au moins une de ces cases est cochée'. Je suis nouveau à JQuery, mais je pense que c'est environ 1 ligne de JQuery et beaucoup plus compliqué dans le modèle ASP.NET traditionnel. Donc, je veux profiter pleinement des capacités de JQuery, mais pas complètement le modèle de validation d'ASP.NET.

Ma meilleure approche est jusqu'à présent cette (qui va à peu près derrière le dos de ASP.NET):

$('#<%=btnJoinMailingList.ClientID %>').bind('click', function(event) { 

    if (...) { 
     alert("You must enter a name"); 
     return false; 
    }  
    return true; 
}); 

Qu'est-ce qu'une meilleure approche ici? Y a-t-il des plugins recommandés pour JQuery?

PS. Je ne veux pas utiliser le modèle MVC. J'essaye de créer un site très "RAD" et je n'ai pas le temps de me plonger dans ce nouveau truc amusant.

Answer 1

Les formulaires Web ASP.NET et le modèle de validation de jQuery sont très, très similaires, à mon humble avis, car les deux sont côté client et la mise en œuvre de l'un d'entre eux ne sape pas nécessairement l'autre. La seule vraie différence serait que, dans les coulisses, les valideurs ASP.NET provoqueront la méthode Page.Validate() pour renvoyer false si vous avez un champ non validé.

Vous pouvez choisir de lancer manuellement vos propres contrôles de validation, puis provoquer le même comportement, mais, comme vous l'avez indiqué vous-même, cela peut être excessif. JQuery possède également son propre plugin Validator que vous pouvez consulter: http://docs.jquery.com/Plugins/Validation/Validator.

Answer 2

ASP.NET possède de nombreux contrôles de validation, l'un d'entre eux étant le CustomValidator.
Vous pouvez lui donner une fonction JavaScript personnalisée qui utilise jQuery et renvoie true ou false via l'argument. Vous pouvez utiliser ce contrôle pour afficher le message d'erreur automatiquement, ou simplement exécuter le code jQuery et gérer l'affichage manuellement.

Aspx:

<asp:CustomValidator ID="CustomValidator1" runat="server" Display="None" 
        ClientValidationFunction="checkTextareaLengths"> 
</asp:CustomValidator> 

JavaScript:

function checkTextareaLengths(source, args){ 
    args.IsValid = true; 
    $('textarea').each(function(){ 
    if($(this).text().lenght > 400) 
     args.IsValid = false; 
    }); 
} 

Answer 3

ASP.NET validateur est une durée avec des attributs supplémentaires. Avec jquery vous pouvez accéder à tous les validateurs sur la page ou les filtrer par tous les critères pris en charge par jquery. Forcer la validation via la fonction ValidatorValidate de l'appel javascript. Par exemple:

function validate_step(step_element) { 
     // find all validators on step_element and force validation 
     var validators = $(step_element).find("span[controltovalidate]"); 
     var stepIsValid = true; 
     validators.each(function() { 
      ValidatorValidate(this); stepIsValid &= this.isvalid; 
     }); 
     return stepIsValid; 
    }