ASP.Net + plugin de validation jQuery + jQuery + UpdatePanel + nyroModal - le succès de chaque champ!

Question

J'ai un formulaire contenant une liste de champs de saisie que l'utilisateur remplit avec des prix (nombres). J'ai défini leurs classes css sur "required" et "number" pour que le plugin de validation jQuery les valide en conséquence. Tout cela fonctionne parfaitement bien. Les erreurs sont affichées lorsque chaque champ n'est pas un nombre ou que la valeur est manquante, etc.

L'intégralité de ce formulaire se trouve dans une fenêtre contextuelle du modèle nyroModal (plugin jQuery). Mais cela ne devrait pas importer, c'est juste un formulaire Web .aspx indépendamment. Dans ce cadre, j'ai également utilisé un UpdatePanel et mis tout ce qu'il contient, car ma forme est essentiellement un processus en deux étapes. L'utilisateur doit remplir certaines étapes de base sur la première page du formulaire. Quand cela valide et fonctionne, je cache/montre juste quelques éléments dans le UpdatePanel pour montrer à l'utilisateur la prochaine 'page' du formulaire, qui est tous les champs de saisie de textbox de prix comme décrit ci-dessus. J'utilise ImageButton comme point de déclenchement pour valider le formulaire. Par défaut, si vous laissez juste un ImageButton tel qu'il est, .Net déclenchera une publication, AJAX dans mon cas, car tout se passe dans un UpdatePanel. Lequel, encore une fois, est désiré. Je ne veux pas une publication complète laide pour des raisons évidentes. Après beaucoup de lecture, j'avais besoin d'un moyen de joindre au PageRequestManager de .Net en javascript pour que je puisse intercepter quand .Net voulait faire une publication, selon si jQuery avait validé le formulaire ou non. Donc ma logique dit: Par défaut, n'autorise pas les postbacks, mais quand jQuery valide le formulaire, définissez une variable qui dit que les postbacks sont maintenant autorisés, puis la prochaine fois qu'un postback essayera de se produire, il passera. Et donc afficher le succès à l'utilisateur.

Cela fonctionne raisonnablement bien, mais il y a un dernier problème. L'option validate ({success}) du plug-in de validation de jQuery semble se déclencher à tort une fois la validation réussie sur chaque champ et non sur l'intégralité du formulaire. C'est à dire. si je saisis un nombre dans l'un des champs de saisie des prix, cette option de succès se déclenchera et affectera la valeur false à la variable cancelPostback, ce qui signifie que le formulaire est soumis même s'il n'a pas été validé valide. Je m'attendais à ce que cette option de validation ({succès}) ne se déclenche qu'une fois que le formulaire entier a été validé. Est-ce que j'ai interprété cela incorrectement, et en fait c'est ce qu'il a fait pour être? Si oui, comment puis-je simplement définir ma variable cancelPostback sur true UNIQUEMENT lorsque le formulaire ENTIER est validé?

Remerciements pour des idées ou des heads up.

Mon code jQuery pour mettre en œuvre la validation et intercepter également l'événement postback .Net est la suivante:

<script type="text/javascript"> 
    // By default, don't allow Postback until we've successfully validated our form on the client-side. 
    var cancelPostback=true; 

    // Every single time the page loads, including every single AJAX partial postback 
    function pageLoad() 
    { 
     // Reset the value to say that "We don't allow Postbacks at this stage".. 
     cancelPostback=true; 

     // Attach client-side validation to the main form 
     $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } }); 

     // Grab a reference to the Page Request Manager 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_initializeRequest(onEachRequest); 

     alert("Page Load"); 
    } 

    // Our own custom method to be attached to each new/future page request.. 
    function onEachRequest(sender, args) 
    { 
     alert("About to cancel? " + cancelPostback); 
     // Check to see if we need to Cancel this Postback based on Conditional Logic within this page.. 
     args.set_cancel(cancelPostback); 
    } 
</script> 

Answer 1

Je suggère regarder le submitHandler et les options invalidHandler. L'un ou l'autre devrait fonctionner pour ce que vous voulez. La meilleure façon, je pense, serait d'autoriser les publications par défaut et de mettre le cancelPostback à true dans invalidHandler. Vous pouvez également écrire votre propre submitHandler qui appelle directement __doPostBack et remplace la soumission via ImageButton.

Answer 2

Remerciements tvanfosson pour l'assistance rapide.

mise à jour Ok:

Je suivais de plus en plus de liens et finalement trouvé la documentation de « succès ».La documentation sur la page d'accueil du plugin est terrible et omet de nombreuses fonctionnalités clés :) Mais sur la page officielle de jQuery, c'est "mieux". L'option "succès" est destinée à déclencher chaque fois qu'un champ individuel est validé avec succès. Donc, cela fonctionnait par conception et je supposais à tort qu'il ne se déclencherait que lorsque le formulaire entier serait valide.

J'ai essayé votre idée invalideHandler. J'ai aimé cette idée. Un problème auquel je me suis heurté était que la publication d'ImageButton continuerait TOUJOURS à se déclencher en premier, donc elle commencerait à poster avant que le code invalidHandler ne s'exécute. Donc, la publication continuerait toujours, ensuite, invalidHandler désactiverait les publications ultérieures, malheureusement, elles tiraient dans le mauvais ordre. Mais en dehors de cela, il a montré tous les autres signes d'être la solution parfaite.

Je suis ensuite allé dans l'autre sens en essayant la méthode submitHandler, c'est-à-dire l'inverse. Encore une fois, cela a souffert de certains problèmes d'ordre, parce que la publication se déclencherait à nouveau en premier, mais serait bloquée, alors Handler autoriserait les futures publications, mais il était déjà trop tard, donc cette publication a été manquée. Vous devrez cliquer à nouveau deux fois sur le bouton pour l'obtenir.

Donc, la solution semi-kludgey finale, ce n'est pas trop mal pour être honnête, était:

j'ai changé cette ligne: // Fixer la validation côté client à la forme principale $ ("# < % = form1.ClientID%> "). validate ({submitHandler: function() {PreventPostback = false; __doPostBack ('UpdatePanel1', '');}}); Comme vous pouvez le voir, la variable PreventPostback est basculée en premier, puis une nouvelle publication est déclenchée manuellement, car la première publication a déjà été bloquée et est déconnectée. Ainsi, cet appel __doPostBack manuel garantit qu'une nouvelle publication est déclenchée en respectant la nouvelle valeur de PreventPostback. J'ai supprimé les méthodes d'événement derrière les ImageButtons et j'ai créé une nouvelle méthode dans le code côté serveur appelé "DoPostBackLogic()" qui n'est appelée que lorsque la page est postée, et je sais que cette validation doit provenir de cette validation. logique, parce que c'est la seule publication qui peut arriver sur mon formulaire. Ensuite, toute la logique cacher/montrer/sauver se passe là pour moi. Ce qui signifie que lorsque j'appelle manuellement le __doPostBack, je peux simplement utiliser l'ID du UpdatePanel et ne pas m'inquiéter d'imiter un ImageButton particulier.

De cette façon, cela fonctionne parfaitement. Les publications sont désactivées par défaut et, lorsque le formulaire est valide, les publications sont autorisées, mais une publication est déclenchée manuellement pour que la nouvelle valeur prenne effet.

C'est donc essentiellement votre deuxième solution, merci encore une fois pour votre écoute et votre partage! :)

Answer 3

J'ai eu des problèmes avec votre solution car tous les navigateurs sauf IE faisaient passer la fonction "onEachRequest" AVANT la fonction submitHandler() du validateur jQuery. Je suis venu avec une solution plus élégante qui annule simplement la publication si la validation échoue, plutôt que de s'appuyer sur une variable prédéfinie.

Sys.Application.add_init(function() { 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_initializeRequest(onEachRequest); 
    }); 

    function onEachRequest(sender, args) { 
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) { 
     args.set_cancel(!$('#aspnetForm').valid()); 
    } 
    }