Gérer les données des formulaires HTML avec jQuery et l’Ajax

Dans cette leçon, nous allons voir comment utiliser l’Ajax pour donner gérer les formulaires et notamment pour valider les différents champs de formulaire en temps réel et sans rechargement de la page ni du formulaire.

 

La sérialisation des données des formulaires

En informatique, la sérialisation se définit comme un processus de transformation de structures de données dans un format pouvant être stocké ou transmis et reconstruit ultérieurement.

jQuery met deux méthodes à notre disposition pour sérialiser les données de formulaire : les méthodes serialize() et serializeArray(). Ces méthodes vont nous permettre de modifier le format des données de formulaire avant leur envoi.

La méthode serialize() sérialise les données d’un formulaire en les changeant en une chaîne de requête. Pour que la valeur de l’élément soit sérialisée, il doit avoir un attribut name. Notez également que les valeurs des input type="checkbox" et input type="radio" ne sont incluses que si elles sont cochées.

La méthode serializeArray() est similaire à la méthode code>serialize() à la différence qu’elle produit un tableau d’objets plutôt qu’une chaine.

See the Pen
Cours jQuery 5.3.1
by Pierre (@pierregiraud)
on CodePen.

Présentation des méthodes jquery serialize et serializearray

 

La validation des formulaires en jQuery Ajax

jQuery va nous permettre de facilement tester qu’un champ a bien été rempli, une case bien cochée, que tel champ possède bien tel forme etc. et permettre de donner des indications à l’utilisateur en temps réel par rapport au remplissage des différents champs.

Notez bien ici que la validation effectuée en jQuery côté client ne doit jamais se substituer à une validation robuste côté serveur afin de prévenir certains comportements dangereux provenant d’utilisateurs malveillants.

On va déjà pouvoir vérifier si les champs de formulaire qui doivent être remplis le sont bien. Si ce n’est pas le cas, on voudra alerter l’utilisateur et empêcher l’envoi du formulaire.

See the Pen
Cours jQuery 5.3.2
by Pierre (@pierregiraud)
on CodePen.

Laisser un commentaire