close
#Validation des formulaires
La gestion des formulaires peut parfois être un peu compliquée. Et avec des formulaires dynamiques, encore plus !
Access.js vous donne les bons outils pour réaliser ceci sans même une seule ligne de code,
mais n'applique que des validations basiques sur les champs. Si vous voulez implémenter votre propre
logique, cela ne nécessitera que quelques lignes de code supplémentaires (promis juré).#Utiliser l'événement onFormSubmit
Tout comme l'événement
submit ordinaire d'un formulaire, onFormSubmit permet
d'intercepter le formulaire entier et d'en faire ce que vous voulez, et même de renvoyer des
erreurs si nécessaire.Dans cet exemple (en supposant que vous utilisiez jQuery), nous utilisons simplement les champs et leurs valeurs fournies pour effectuer une demande à notre API et traiter un paiement hypothétique.
Maintenant que nous savons comment obtenir nos champs, nous pouvons vérifier la validité de certains d'entre eux :
Dans notre exemple, nous avons effectué deux vérifications simples :
- Nous avons vérifié que le nom d'utilisateur fourni contenait un caractère
@(c'est un exemple très basique, ne le faites pas en production), et si ce n'est pas le cas, nous renvoyons une erreur sur le champusernameavec un message personnalisé. - Et nous avons vérifié que le mot de passe fourni faisait plus de 6 caractères (ne le faites pas en production non plus), et si ce n'est pas le cas, nous renvoyons une erreur basique en utilisant uniquement le nom du champ.
Et nous avons renvoyé les erreurs dans un array. Vous pouvez soit ajouter la fieldKey elle-même (par exemple
password)
ou ajouter un objet avec comme structure { fieldKey, message } si vous voulez utiliser un message d'erreur personnalisé.ℹ️ Toute valeur renvoyée dans l'événement
onFormSubmit sera considérée comme une erreur.
Donc si vous ne détectez pas d'erreur dans le formulaire, ne renvoyez rien ou renvoyez un tableau vide ou null.Pour aller encore plus loin, nous pourrions également utiliser des promesses et renvoyer nos erreurs depuis le côté serveur :
ℹ️
resolve et reject entraînent tous deux une erreur si un array contenant des fieldKeys ou des objets est renvoyé.#Utiliser les Webhooks
Une autre méthode très pratique pour vérifier la validité des champs est d'utiliser des Webhooks personnalisés.
Même si cela nécessite de réaliser un appel réseau vers votre webhook, cela présente un avantage très important : vous pouvez utiliser la validation côté serveur sans divulguer l'url de votre serveur.
ℹ️ Un Webhook peut être n'importe quelle URL accessible depuis le web qui peut traiter des requêtes POST.
Pour illustrer l'utilisation des webhooks personnalisés, nous allons créer une url de webhook temporaire de la forme suivante
Webhook.site :
Afin de tester également le renvoi d'une erreur, nous allons modifier la réponse donnée par notre webhook
temporaire pour inclure le(s) champ(s) correspondant(s) :
Une fois que notre webhook est prêt, nous pouvons l'ajouter à notre Dashboard dans
Access > Paramètres > Connecteurs solutions tierces :
ℹ️ L'URL du webhook est censée renvoyer une réponse 200 même s'il y a des champs
erreurs, les réponses 4xx ou 5xx étant réservées aux erreurs réelles du serveur.
En supposant que nous avons supprimé la logique de validation de notre exemple précédent et que nous l'avons déplacée vers notre webhook, notre code est maintenant le suivant :
Dès qu'un utilisateur remplit l'un de vos formulaires, le webhook reçoit une nouvelle demande :
Nous avons précédemment modifié notre webbook pour renvoyer une erreur sur le champ
password, vous pourrez voir le résultat dans l'onglet réseau de votre navigateur, dans l'élément submit :
