Tutoriel - Ajouter de la validation à des formulaires personnalisés

AVERTISSEMENT : ce contenu reste en ligne à des fins d'apprentissage, mais Ops Machine recommande expressément de NE PAS utiliser Adalo. Pendant la période où nous l'avons utilisé, il s'est montré terriblement peu sécuritaire, incomplet et, en gros, à peu près impossible à utiliser pour livrer quoi que ce soit.

De plus, la bibliothèque de composants Pragmaflow n’est plus maintenue, après avoir été brisée à répétition par les mises à jour de la plateforme Adalo.

‍

‍

‍

Dans cette vidéo, on crée un formulaire qui n’utilise pas le formulaire Adalo standard, mais qui valide quand même les champs obligatoires. ‍

‍

Transcriptions

‍

On va montrer comment faire de la validation de champs sur un formulaire personnalisé, pour que vous puissiez créer des éléments personnalisés tout en gardant la validation des champs. On va d'abord aller au formulaire standard. C'est simplement celui que vous glissez-déposez sur l'écran et que vous branchez. Si je crée ma collection, ça dit que le champ est obligatoire.

Si je tape quelque chose, ça va le terminer. Le vider. On va juste revenir en arrière. On voit que ça a créé l'enregistrement, mais si on voulait faire ça sans le formulaire standard, pour avoir quelque chose de mieux que « ce champ est obligatoire », avec l'utilisateur et le nom qu'on veut modifier? Pour ça, on peut se bâtir nous-mêmes un formulaire personnalisé qui va nous donner les erreurs qu'on veut quand on crée l'enregistrement.

Et quand on tape quelque chose, bon, là je faisais juste jouer avec. Là, ça devrait afficher un message d'erreur. On va aller dans l'application pour comprendre pourquoi ça n'est pas apparu, mais c'est parce que j'ai supprimé des collections et ajouté des collections. Je choisis donc celle-là. Quand je crée un enregistrement, voilà, on a maintenant le deuxième.

On avait donc la validation d'erreur sur le deuxième. Pour le formulaire standard, vous glissez-déposez simplement le formulaire. C'est une collection de ma collection. Je veux créer un nouvel enregistrement. On dit « ce champ est obligatoire » et on peut changer le texte. Ce champ est obligatoire et on peut changer le texte. Si on a un menu déroulant ici, c'est que dans ma base de données, j'ai un lien vers l'utilisateur.

Quand vous avez un lien vers l'utilisateur où un utilisateur ne peut avoir, ou cette collection ne peut appartenir qu'à un seul utilisateur, ça s'affiche comme un menu déroulant. Et c'est tout. En fait, regardons juste celui-ci. Je vais passer à travers tout ça... non, en fait, faisons-le ensemble. On va comprendre ça ensemble.

Ce qu'on fait maintenant, c'est qu'on peut simplement mettre notre propre zone de texte. C'est une zone de texte ordinaire. On met notre propre champ de saisie, on rend ça plus joli, « veuillez entrer un nom ». On a donc l'erreur ici. Cette erreur va s'afficher. Elle est parfois visible. Si l'erreur de texte est égale à true. Allons voir ce qui se passe.

On a créé une page non liée ici. On voit qu'aucun lien n'arrive vers elle, et on utilise des champs de texte juste pour faire la validation des entrées. Si on met cette valeur ici à true, ça va afficher ceci ici parce que c'est parfois visible. On n'a pas besoin de ça. Pour chaque champ de saisie qu'on a ici, sur la page de validation, on en aurait un comme ça.

Celui-ci va avec, celui-ci va avec celui-là. On met le texte, « choisissez un utilisateur ». On a le menu déroulant, c'est la liste des utilisateurs. On peut rendre ça plus joli comme on veut. Et ensuite, ici, ce sera parfois visible. Si l'erreur d'élément est égale à true. Donc si ceci ici est égal à true, oh, désolé.

Celui-ci. C'est l'inverse. Celui-ci est pour, celui-ci est pour celui-là. On a donc « parfois visible ». Ce qu'on fait maintenant, c'est que quand on clique pour créer un enregistrement, on va changer ces valeurs. Les actions se produisent en cascade. Celle-ci va se produire avant celle-là, qui se produit avant celle-là, qui se produit avant celle-là, qui se produit avant celle-là.

On va donc changer l'erreur d'élément. Celle-ci juste ici. À true si, voilà pourquoi ça ne s'affichait pas. Parce que j'avais supprimé quelque chose. L'action va seulement se produire si l'utilisateur sélectionné est égal à vide. Donc si c'est vide, on met l'erreur d'élément, qui est ceci, au mot true. La chose suivante qu'on fait, c'est mettre l'erreur d'élément à vide.

Si. Réglons ce problème. Si l'utilisateur sélectionné est égal à, n'est pas égal à vide. Donc s'ils ont sélectionné une valeur, on va mettre ceci à vide, et on fait la même chose. Vous allez donc avoir, pour chaque champ de saisie, et c'est pour ça que ça demande un peu plus de travail, mais vous pouvez faire une très belle UX avec ça, pour chaque champ de saisie que vous avez ici, vous allez avoir deux actions : une pour le mettre à, une pour indiquer qu'il y a une erreur.

Une pour indiquer qu'il n'y a pas d'erreur. On fait donc la même chose : mettre l'erreur de texte à true si l'entrée est égale à vide, mettre l'erreur de texte à vide si l'entrée n'est pas égale à vide. Ensuite, on a une autre affaire ici. Je l'ai laissée visible pour l'instant, mais on va la rendre invisible. La valeur par défaut de cette zone de texte, c'est l'erreur d'élément.

L'erreur de texte, et vous allez avoir chacun de ceux-là. Si vous avez quatre champs de validation, cinq champs de validation, vous en auriez cinq comme ça ici. Comme ça, on peut créer ma collection. Le nom qu'on va associer, c'est ce champ ici. Et l'utilisateur qu'on va associer vient de ce menu déroulant ici, mais ça va seulement se produire parfois, si l'erreur de formulaire est égale à vide, ce qui veut dire que si cette étape ici a mis l'erreur d'élément à true, cette valeur ici va contenir le mot true.

On va le refaire. Formulaire personnalisé. Créer l'enregistrement déjà. Par défaut. Désélectionnons plutôt ceci. Voilà. On a donc true et true ici. Comme on en a deux, ceci n'est pas égal à vide. Si on règle ce problème,

il n'y a que celui-ci. On a donc un seul true, mais ce true fait apparaître ceci. On sélectionne un utilisateur, on crée l'enregistrement. Ensuite, on a vidé le formulaire après, en fait, faisons cette étape maintenant. Je ne vais pas vous embêter avec ça, vous pouvez le faire. C'est assez long comme ça. Et là, l'enregistrement a été ajouté.

Il a été ajouté une seule fois, et un seul enregistrement, parce que les autres n'ont pas été créés, puisque ceci n'était pas égal à true. C'est tout. Juste un petit truc pour faire des formulaires plus beaux que le formulaire Adalo de base. Comme ça, vous pouvez mettre des choses côte à côte. Offrir une meilleure expérience.

Vous pouvez faire la liste en cascade. Tout ce que vous voulez.