IONIC Section 4 - 4.13 Validation de l'entrée utilisateur

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, donc avec notre première logique ajoutée, assurons-nous maintenant que lorsque nous cliquons sur ce bouton de confirmation, nous stockons le titre ou la description de la dépense, le motif et le montant. Donc pour cela, je vais ajouter une constante, la raison entrée ici, donc "const enteredReason=" où j’accède à l’entrée de la raison. Comme il s’agit d’un élément « input », il aura une propriété « value » que nous pouvons lire pour obtenir la valeur input par l’utilisateur en indiquant « reasonInput.value; » . On va également stocker le montant saisi avec « const enteredAmount = amountInput.value; » le même principe que pour « Reason ». Nous pouvons continuer avec ces valeurs, mais il serait judicieux de savoir dans un premier temps, si l’utilisateur a bien entré des valeurs correctes. Pour cela, nous pouvons ajouter notre propre logique de validation simple en ajoutant la condition « if », si vous avez des difficultés ou si tout simplement vous souhaitez apprendre le langage JavaScript, je vous invite à consulter les vidéos sur cette techno dédiée à cet apprentissage pour renforcer vos connaissances. Donc if (enteredReason.trim().), la méthode « trim » permet de retirer les blancs en début et fin de chaîne. Les blancs considérés sont les caractères d'espacement ainsi que les caractères de fin de ligne. Et on va ajouter length <= 0, si la longueur est alors inférieure ou égale à zéro, l’utilisateur n’a rien saisi. On va mettre un opérateur logique « ou » « || enteredAmount <=0) » indiquant si le montant est inférieur ou égal à zéro, le champs n’est donc pas correct, et on va ajouter une autre possibilité « || enteredAmount.trim().length <=0 ) » lorsque le champ est simplement laissé vide. Donc nous avons notre condition ici, nous allons donc saisir un « return «  pour arrêter l'exécution de la fonction ne plus continuer si les valeurs ne sont pas correctes. Maintenant, si les valeurs sont corrects, on souhaite donc continuer notre boucle en indiquant un console.log(enteredReason, enteredAmount); Maintenant on revient sur notre page, on recharge notre appli, on inspecte l‘élément pour avoir un oeil sur notre console, donc je vais mettre une raison de dépense « facture », on va mettre 50.99, on valide notre dépense, et nous voyons bien que la valeur de nos champs sont bien pris en compte dans notre console. Donc ça c’est un premier test, maintenant on peut essayer d’autre test, comme essayer de valider sans motif de dépense, lorsque je veux l’entrée, cela ne fonctionne pas, et si je saisie une valeur de 0 et que je saisie en motif « facture eau », cela ne fonctionne pas non plus par contre si je met une valeur supérieur à 0, 1 par exemple, cela fonctionne très bien. Pour que cela fonctionne davantage, assurons-nous de créer des éléments Ionics, de manière dynamique dans le code JavaScript puis de les attacher à notre « card » parmi nos “input”. Cette vidéo touche donc à sa fin, je vous donne rendez-vous pour la prochaine.