Mon premier bug en jQuery

Bonsoir à tous
Rappel des épisodes précédents:
1) depuis 1996 j'ai constitué ma bibliothèque personnelle de fonctions et objets JavaScript
2) jQuery étant devenu un outil solide, je me suis procuré une doc "pour les nuls", qui a l'air compréhensible
3) ce faisant j'ai découvert (ce qui était a priori évident) que pour l'essentiel jQuery offrait les fonctions de ma boîte à outils, avec bien entendu des choses en plus, fort intéressantes (et d'autres moins, mais ce n'est pas gênant)
4) j'ai donc choisi l'opportunité d'avoir à créer un nouveau site pour essayer de migrer mes méthodes de travail de ma bibliothèque personnelle à jQuery

Pouf commencer, je prends le programme en cours (entrée et modification des informations personnelles d'un utilisateur du site)
Pas trop de problèmes, jusqu'au moment où je veux vérifier la validité des champs de mon formulaire. Je sais bien qu'il existe des validateurs jQuery, mais c'est surtout pour m'assurer de bien comprendre le comportement de ce outil.
J'ai cru comprendre que l'ensemble des balises input du formulaire dont l'id est "updateForm" se disait $('#updateForm:input'); J'ai l'impression que cette formulation est erronée.
Il est clair que tant que je n'aurai pas trouvé comment traiter ce problème rudimentaire je n'irai pas très loin...

Votre éclairage est vivement souhaité!
Bonne nuit à tous
Modifié par PapyJP (09 Feb 2015 - 01:12)

Bonjour à tous

Comme on a les idées bien plus claires à 9h qu'à 1h du matin, j'ai testé en remplaçant

$('#updateForm:input')    // balises input de la form updateForm (???)

par

$(':input')    // toutes les balises input de la page

Le programme se déroule comme je l'escomptais, c'est à dire que quand je fais

$(':input').each(function() {...});

la fonction est bien exécutée pour toutes les balises input de la feuille. Mais cela ne me dit pas comment sélectionner uniquement les balises input d'une form donnée.

Je suis donc toujours à la recherche d'une explication de la syntaxe de ces f... sélecteurs!!!
Modifié par PapyJP (09 Feb 2015 - 10:49)

Bonjour,

la syntaxe de Sizzle (le moteur de sélecteurs de jQuery) est très proche de CSS mais :input est une des exceptions parce que ça n'existe pas en CSS, c'est un ajout.
J'aimais bien la doc de http://jquery.developpeur-web2.com/documentation/selecteurs.php mais ce n'est plus mis à jour depuis un bail. Ne pas utiliser pour les évènements (.live() on oublie, c'est .on() maintenant) mais pour les sélecteurs ça devrait aller.

:input n'est qu'un raccourci de $('input, textarea, select, button')
Pour les sélectionner seulement dans un formulaire donné, il faut d'abord sélectionner ce form parent : $('#idDuForm :input') par exemple.
Ou $('[name="nameDuForm"] :input')
avec un espace devant :input : #idDuForm n'est pas un :input mais ce dernier en est le descendant (enfin les descendants).
En CSS on stylerait comme ça :
#idDuForm input,
#idDuForm select,
#idDuForm textarea,
#idDuForm button {
propriete: valeur;
}
et ça ciblerait les mêmes éléments

Bonjour,

Voici un lien intéressant concernant les sélecteurs jQuery.

Merci de vos réponses

En fait il manquait un espace:

$('#updateForm :input').each(function(index) {...})

au lieu de

$('#updateForm:input').each(function(index) {...})

J'avais également essayé

$(':input', $('#updateForm').get()).each(function(index) {...})

qui marche très bien mais est un peu lourd.

La syntaxe est bien $(selection , domain), mais je me demande dans quel cas on précise le domain, qui le plus souvent sera lui-même le résultat d'une sélection.

Pour en revenir à la transition depuis ma boite à outils, il se trouve que j'avais une fonction "$" qui n’était que l'abréviation de document.getElementById, il me suffit donc de remplacer "$('" par "$('#", ça fait déjà la moitié du boulot.
Modifié par PapyJP (09 Feb 2015 - 12:26)