11544 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Meilleure méthode pour gérer un formulaire ?

Jusqu'à maintenant j'avais quelques formulaires dont la gestion/vérification était faite en html/php. Mon formulaire était généré via php avec des requêtes sql pour aller chercher quelques données puis il était envoyé vers un script php pour vérification une fois les données soumises par l'utilisateur.

Cette méthode fonctionne mais n'est hélas pas très dynamique puisque les retours suite données erronées ne sont fait qu'une fois le script php executé.

J'aurai aimé avoir votre avis sur la meilleure organisation à avoir pour nos formulaires.

Je pensais faire la chose suivante :

1. formulaire généré en html via php avec requêtes en bdd
2. vérification des champs saisis de façon dynamique via jquery
3. envoi des données à un script php via jquery (fonction ajax, méthode POST)
4. loader jquery en attendant le retour du script php
5. vérif des données coté serveur via php ( utile ou pas pour une question de sécurité ?)
6. retour d'information envoyé par le script php et récupéré par jquery
7. fin du loader et affichage du résultat via jquery ou execution d'une fonction selon le cas (fermeture d'un pop fancybox, refresh d'un div etc)

Qu'en pensez-vous . Avez-vous des remarques particulières ou des astuces à partager ?

Cdt
Modifié par Klesk (14 Sep 2012 - 09:21)
Salut,

bonne question Smiley smile

Je suis plutôt adepte de ta méthode :

1. gestion minime des valeurs en js (avec feedbacks) : tu peux même penser y ajouter des éléments type Jquery UI (champ range...)

2. une fois les validateurs JS passé, tu envoies une requête Ajax à ton serveur (là encore tu peux mettre des feedbacks type loader...).

3. ton serveur valide les champs (c'est super important, tu ne pourras jamais assurer la sécurité sans langage serveur).

4. tu remontes tes messages au front (formulaire envoyé, champs incorrect, email déjà existant...). Tu affiches tes feedbacks et demande les corrections.

5. tu fais autant de requête Ajax que nécessaire.

Ainsi tu guide toujours ton internaute, sans jamais recharger ta page. D'un point de vue optim c'est pas mal, tu ne perds pas ton visiteur avec un formulaire pompeux.

Ju
Merci pour ta réponse Julien,

Je suis novice en JS donc j'apprends petit à petit. Comment gères-tu ce que tu appèles les feedback ? En gros comment faire pour qu'un loader par exemple s'execute en attendant le retour de php en json par exemple ?
Salut,

désolé de répondre si tardivement.

Pour gérer les feedbacks, tu peux utiliser la fonction ajax() de jQuery. Grâce à ses méthodes tu peux :

* Quand tu lances ta requête, afficher le loader,
* Quand tu reçois le json ou l'erreur de ton serveur, traiter tes données, masquer ton loader et afficher les messages correspondants.

Personnellement, ce plugin m'a beaucoup appris. Peut-être pourras-tu en apprendre autant.

Tu as un premier jet de feedbacks (champs vides, format incorrect...), ensuite tu poste ta requête à ton serveur qui te retourne si il y a une erreur dans le traitement de tes données ou si tout va bien.

Tu pourras personnaliser les comportements à ta guise. Je me suis fait mon propre plugin pour tendre vers ce que je souhaite (feedbacks plus élaborés & js plus simple au détriment du code HTML ^^).

En espérant que ça t'aide.

Ju
Modifié par Julien Optea (06 Sep 2012 - 09:34)
Merci Julien. J'ai pas mal avancé entre temps et je suis en train de voir pour utiliser des callback avec Fancybox, Datatables et Datepicker de façon a ce que mes fonctions soient chargées dans un contenu fancybox.ajax.

Je commence à comprendre comment ça marche mais je galère un peu Smiley lol et je tatonne bcp.

Sinon pour ma validation je vais finalement utiliser les types d'input html 5, qui simplifient énormément la vie Smiley lol . (mail, url, etc). Du moins ceux qui sont reconnus par tous les navigateurs récents, donc exit le type='date' ce qui est bien dommage Smiley lol .
Modifié par Klesk (07 Sep 2012 - 18:25)
Sujet clos
Aller à