Comment gérer l'état d'erreur d'un formulaire dans jQuery Mobile et renvoyer du HTML ?

Question

Quelle est la meilleure façon de gérer les formulaires en jqm ?

Par exemple, disons que l'utilisateur remplit un formulaire et que certaines données ne sont pas validées. Cela n'est pas détecté par la validation JS, mais cela déclenche une logique métier, ce qui signifie que le système ne peut pas continuer.

En jqm, le formulaire serait renvoyé à l'utilisateur et le framework le chargerait et y naviguerait. Je ne veux pas que l'on y accède car il ne s'agit pas d'un nouvel état - je veux juste que le formulaire mis à jour soit affiché avec un message d'erreur. Je ne veux pas non plus désactiver l'ajax, car cela ajoute un rechargement complet inutile de la page.

Idéalement, ce que j'aimerais, c'est pouvoir dire à jqm de ne pas faire de transition ou d'inclure la réponse dans l'historique, mais plutôt de l'afficher à la place de ce qui existe déjà.

La seule façon d'y parvenir est d'écrire mon propre petit gestionnaire de formulaire et de renvoyer le JSON du serveur, qui comprend un état d'erreur. Si la soumission est bonne, on passe à la page suivante, sinon on met à jour le html dans la vue avec le html renvoyé comme partie de l'objet JSON qui inclut tout message d'erreur.

Il doit bien y avoir une meilleure solution ?

Merci

Answer 1

Bonne question et je serais également intéressé de voir ce que les autres ont à dire. Pour ce que cela vaut, dans une application récente (qui devait également fonctionner hors ligne), j'ai suivi la voie que vous proposez pour mes formulaires :

1. Empêche l'action de soumission par défaut.
2. Utilisation d'un appel ajax à partir d'un bouton, qui vérifie les données avant de les soumettre soit à un service Web, soit à une simple sauvegarde dans la base de données locale (en fonction d'un indicateur d'état et du fait que nous soyons en ligne ou non).
3. Assurez-vous que tous les messages pertinents de succès/échec remontent par le callback submit afin que nous puissions
4. mettre à jour la même page html avec les résultats de la soumission de l'utilisateur.

Cela fonctionne bien, et les utilisateurs sont satisfaits. Cependant, elle correspond à mon cas particulier : je ne voulais pas utiliser de chaîne de requête / location.hash car (a) jQM a parfois des problèmes avec les hashs et (b) l'utilisateur est potentiellement hors ligne (et pas de serveur web signifie pas de chaîne de requête). Votre expérience peut varier, bien sûr.

EDIT : code pour mettre à jour une page avec des messages Pour mon application, je voulais qu'une liste de messages apparaisse dans la page en cours lorsque cela est nécessaire. J'ai donc une liste vide non ordonnée ( messages ) dans la page HTML concernée, qui se trouve à son tour dans un div stylé ( message-pane ). Voici un extrait de code montrant comment la mise à jour s'effectue (notez le symbole refresh appel, qui est requis dans jQM). Vous pourriez déclencher un code comme celui-ci à partir de votre gestionnaire ajax :

var list = $("#messages");
list.append('<li>YOUR MESSAGE HERE</li>');
list.listview('refresh');
$("#message-pane").show();