[progliste] Re: validation d'un formulaire en jquery

[Jean-François Colas]

Hello Christophe et la foule,

J'avais eu en son temps un bouquin sur l'analyse et la programmation, 
dans lequel j'avais cru comprendre que, en gros, on pouvait distinguer 
deux types d'analyses: une "ascendante", et une "descendante", je ne 
suis pas certain que ce soit les bons termes mais bon. L'"ascendante", 
consistant à agencer diverses "briques", conçues en tant que telles, 
pour former un ensemble complexe. Cela reviendrait à mon sens, à 
d'abord  élaborer les fonctions dont on pense avoir besoin, pour ensuite 
seulement fabriquer la partie qui va les utiliser.

L'autre, la "descendante", consisterait à découper le problème complexe 
en sous-problèmes, qui vont eux-même éventuellement faire l'objet de 
découpages en sous-sous-problèmes... Si on suivait ce schéma, on 
pourrait envisager d'écrire d'abord un programme principal, pour 
ensuite, peu à peu, détailler fonction par fonction.

Perso j'avoue que ce schéma-là me conviendrait mieux a priori face à des 
études de sources inconnues, et même dans ma façon d'aborder un 
problème. De plus, si la partie principale est présente le plus en haut 
d'un source, il me semble que ça facilite la localisation du "point 
d'entré". Il y a des langages dans lesquels, trouver le vrai point 
d'entrée d'un programme n'est pas toujours évident. Je ne connais pas le 
PHP suffisamment pour justement savoir quel est le format de la partie 
la plus "englobante". Mais par exemple, en pascal, le bloc principal est 
inclus entre un begin et un end. et ce point est le seul indice, 
crois-je bien, qu'il s'agit du bloc principal, tous les autres 
commençant eux aussi par des begin et se finissant par des end; avec 
point-virgules... Alors il faut localiser le begin qui débute le bloc 
qui s'est fini par end point, pour savoir où commence le "film".

Et après t'avoir dit ça, l'essentiel de mon "bagage" de programmation 
était en turbo-pascal, dans lequel il fallait justement définir les 
fonctions avant leur appel, reléguant la partie principale en fin de 
fichier. du coup, bien que ce soit à contre-courant de mon penchant 
naturel, aujourd'hui quand j'écris en Python j'organise les choses de la 
même manière, partie principale à la fin, presque malgré moi. Au point 
de ne même pas savoir si je pourrais faire référence en Python à des 
fonctions avant qu'elles ne soient appelées...

Sur un plan plus technique, c'est peut-être aussi la distinction entre 
les langages où il faut déclarer les éléments qu'on veu utiliser et les 
autres... S'il faut que les individus (variables, fonctions....) nous 
aient été présentés avant qu'on ne puisse discuter avec eux, alors bien 
sûr, toute fonction doit avoir été définie avant son appel... Dans le 
cas contraire, si on peut parler à un individu qu'on ne connaît pas 
encore formellement, ça laisse libre d'agencer les éléments comme on le 
souhaite.

J.-F.

Le 28/07/2017 11:53, Christophe Garnier a écrit :
Bonjour. C’est très claire maintenant. Par contre dans ton script comme dans 
beaucoup d’autres on appelle la fonction avant de la créer ; pourquoi ? Je sais 
que l’ordre n’a pas d’importance mais d’un point de vue logique, ça m’échappe 
d’utiliser quelque chose avant la création de celle ci.
Merci


Le 22 juil. 2017 à 00:05, Abdel<abdelkrim.bens...@free.fr>  a écrit :

Coucou Christophe,

Tout d'abord, je te remercie pour ton mail en perso.

Je m'excuse pour le retard, je ne suis pas chez moi actuellement.

Maintenant, passons à ta question.

L'objet $validation, c'est l'objet jQuery que l'on a fait pointer, à sa déclaration, sur 
l'input dont l'attribut id correspond à "validation".

Rappelle-toi, nous avions mis :

$validation = $('#validation');

L'événement suivant en jQuery :

$validation.clidk(function(e){
...
}
);

Associe l'événement du click sur l'objet dont l'id correspond à "validation", 
c'est à dire le bouton de validation de notre formulaire.

Donc, tu vois, l'événement onClick est appelé lorsque le bouton de validation 
du formulaire est cliqué par entrée ou avec la souris, peu-importe.

Autrement, les fonctions événementielles peuvent aussi être appelées en utilisant un 
attribut directement sur l'objet en question, comme onClick="laFonction();".

Le paramètre (e) passé à la fonction événementielle, stocke l'objet du dit 
événement et peut à son tour proposer des méthodes et attributs selon la nature 
de lévénement, click, focus,  keyUp, etc

La déclaration de la fonction verif peut être introduite dans le code avant ou 
après son appel, peu-importe.

C'est de cette fonction verif, que je te parlais dans mon mail précédent, en 
disant qu'on aurait pu s'en passer.

Effectivement, on aurait pu mettre directement la condition dans la fonction 
événementielle !

Voila, je reste à ta dispo pour toute question supplémentaire.

Bien amicalement,
Abdel.

-----Message d'origine----- From: Christophe Garnier
Sent: Monday, July 17, 2017 10:36 AM
To: Proglist
Subject: [progliste] Re: validation d'un formulaire en jquery

Salut Abdel et tous. oui j’ai des questions. Les voici :
1 sur la ligne  $validation.click(function(e){ click  n’est-il pas consacré au 
click de souris alors que le script fonctionne bien en tapant entrer sur 
validation ? à quoi sert la lettre (e)
Pourquoi exécuter la fonction verif() avant de la créer ?
Merci de m’expliquer tout ça pour que j’acquière la logique qui va bien.
bonne journée



Le 13 juil. 2017 à 20:14, Abdel<abdelkrim.bens...@free.fr>  a écrit :

Recoucou Christophe,

En effet, le plus simple, pour bien comprendre comment interagir avec le 
formulaire, ce serait de créer un formulaire avec un seul champ de saisie, 
ainsi qu'un bouton de validation.

C'est ce que je vient de te concocter lol !

Dès validation du formulaire, une fonction jquery est appelée, qui va analyser 
le champ.

S'il est vide, elle affichera une alerte, sinon, le contenu du champ dans une 
alerte également.

C'est vrai qu'on aurait pu se passer, pour faire encore plus simple, de cette 
fonction, en mettant juste tout ça dans une structure conditionnelle, mais 
bon...

Je t'ai intégré la balise script comportant le code jquery dans l'entête de la 
page, mais tu peux aussi la séparer en la mettant dans un fichier js externe si 
tu veux.

Le formulaire est disponible en ligne ici et il est également en PJ, dans une 
archive zip :

http://cyber25.free.fr/testValidationJquery/test.html


Voila, n'hésite surtout pas à poster si besoin.

Bien amicalement,
Abdel.


Le 13/07/2017 à 15:11, Christophe Garnier a écrit :
Bonjour. Merci pour ton aide. Oui j’avais essayé ça mais je n’arrive pas à le 
faire fonctionner. De plus, pour moi, je trouve que toutes les explications 
nécessaire n’y sont pas.  en fait je veux faire un truc super simple pour 
tester et après le faire plus complexe. je veux dans un premier temps tester si 
un champ est vide et  pouvoir l’indiquer à l’utilisateur via jquery.
Quand je cherche sur le net, je trouve des trucs super compliqués mais peu 
d’explications précises et simple.
Bonne journée


Le 13 juil. 2017 à 07:36, Abdel<abdelkrim.bens...@free.fr>  a écrit :

Salut Christophe,

As-tu essayé jquery Validate?

Voici un article qui décrit son utilisation, je n'ai pas eu le temps encore de 
faire des tests :

https://www.pierrefay.fr/blog/jquery-validate-formulaire-validation-tutoriel.html

Bien amicalement,
Abdel.


Le 12/07/2017 à 14:54, Christophe Garnier a écrit :
Salut les copains de la liste. Je tente d’apprendre jquery mais je n’arrive pas 
à trouver un exemple simple qui fonctionne.
Je veux créer un formulaire en html et dans un premier temps, vérifier que les 
champs soient bien remplis avec un message d’erreur si ce n’est pas le cas.
Par exemple on a un champ utilisateur et mot de passe puis bouton submit pour 
validation. Je souhaite qu’en validant le formulaire soit indiqué par exemple 
que le champ utilisateur n’est pas remplit.
Si quelqu’un a un exemple simple je prends volontiers.
merci

Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/

Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 
MO

Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.



Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/

Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 
MO
Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.


Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/

Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 
MO

Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.



<testValidationJquery.zip>
Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/

Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 
MO

Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.

Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/       

Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 
MO
Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.
        
        
Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/       

Je vous rappelle que les pi�ces jointe sont activ�s leur taille est limit� � 2 
MO

Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.
        
        

Progliste :
Pour se d�sinscrire de la liste : 
mailto:progliste-requ...@ml.free.fr?subject=unsubscribe

Pour voir les archives de la liste :
http://www.mail-archive.com/progliste@ml.free.fr/       

Je vous rappelle que les pièces jointe sont activés leur taille est limité à 2 MO 

Pour acc�der aux fichiers de la liste
http://outils.archive-host.com/partage.php?id=2Qar9Hy6ftzr
Ou en utilisant la nouvelle page de partage :
http://outils-n.archive-host.com/partage-fm0m7b947vglikp9Efpso94gt
Pour y ajouter des fichiers demandez-moi le ou sur la liste ou en priv�, je 
vous r�pondrez en priv�.