La première des choses à laquelle penser était de s'assurer que le document était chargé. Pour cela, vous deviez utiliser l'évènement ready(), comme appris au début de cette partie.
Code : JavaScript
$(document).ready(function(){
// notre code ici });
Une des bonnes pratiques à adopter est de mettre vos objets jQuery dans des variables. Cela n'est pas obligatoire, mais ça permet un gain d'optimisation conséquent, ainsi qu'une plus grande lisibilité dans le code. En suivant cela, il fallait déterminer quels éléments sélectionner :
le champ du pseudonyme ;
les champs du mot de passe et de la confirmation ; le champ de l'e-mail ;
le bouton d'envoi ;
le bouton de rafraîchissement du formulaire ; le message d'erreur ;
et enfin tous les champs en général (ceux ayant la classe .champ).
Code : JavaScript
Le plus facile étant fait, je vous propose ensuite de déterminer quel évènement vous deviez utiliser. La bonne façon de faire était d'écouter le clavier de l'utilisateur, grâce à l'évènement keyup(), et ce sur chaque champ du formulaire. Il suffisait ensuite de vérifier avec une condition que la longueur de la chaîne de caractère était supérieure à 5, grâce à la méthode val() et à la propriété length que nous vous avions donnés :
Code : JavaScript
// le code précédent se trouve ici
$champ.keyup(function(){
Le principe était similaire pour vérifier que la confirmation et le mot de passe était identique : Code : JavaScript
$confirmation.keyup(function(){
if($(this).val() != $mdp.val()){ // si la confirmation est différente du mot de passe
borderColor : 'red',
Nous devons maintenant nous occuper des boutons d'envoi et de rafraîchissement. Dans le premier cas, il faut vérifier chaque champ un à un, pour voir si l'un d'entre eux est vide. Si c'est effectivement le cas, il faudra l'indiquer à l'utilisateur en affichant le message d'erreur, et également en rendant rouge le champ vide.
Il y a plusieurs façons d'y parvenir, et celle que nous utiliserons ici n'est pas la meilleure. Il existe une méthode spécialement adaptée pour traiter chaque élément trouvé un à un, mais nous ne vous avons pas encore appris comment l'utiliser. A la place, vous pouviez créer une fonction qui se chargeait de vérifier que le champ donné n'était pas vide :
Code : JavaScript
function verifier(champ){
if(champ.val() == ""){ // si le champ est vide
$erreur.css('display', 'block'); // on affiche le message d'erreur
En écoutant le clic sur le bouton d'envoi, on pouvait ensuite lancer la fonction de vérification sur chaque champ : Code : JavaScript
$envoi.click(function(e){
e.preventDefault(); // on annule la fonction par défaut du bouton d'envoi
Le reste était simplissime. Il fallait écouter le clic sur le bouton de rafraîchissement, et annuler tous les styles CSS sur le formulaire :
$erreur.css('display', 'none'); // on prend soin de cacher le message d'erreur
});
Et voilà, nous avons désormais terminé ! Avouez que ce n'était tout de même pas sorcier.
Code : JavaScript
$(document).ready(function(){ l'avait défini dans le style CSS
borderColor : '#ccc',
function verifier(champ){
if(champ.val() == ""){ // si le champ est vide
});
Le code entier faisant moins de 100 lignes, autant vous dire que si vous n'aviez utilisé que du JavaScript pur, vous en auriez eu au moins le double ! C'est à ce moment là qu'on se rend compte de l'efficacité de jQuery. Nous espérons que ce TP vous aura permis de progresser, car la pratique est le meilleur moyen pour obtenir un certain niveau.
Améliorations
Ce formulaire peut encore être amélioré, dans le sens où vous pourriez restreindre encore plus les possibilités de l'utilisateur, en interdisant de dépasser un certain nombre de caractères dans le pseudo, par exemple. De même, le style est pour l'instant ultra basique, rien ne vous empêche de le sophistiquer, pour que l'expérience utilisateur soit poussée à son maximum.
Quelques améliorations au niveau de la sécurité pourraient être apportées :
vous pourriez vérifier le format de l'adresse e-mail, grâce à une expression régulière, faite avec l'objet Regex de JavaScript
;
vous auriez pu également vérifier que le mot de passe était sûr, en faisant par exemple un mini-indicateur de sûreté qui se baserait sur le nombre de caractères, leur diversité, ...
il est possible d'afficher un message d'aide pour chaque champ, lorsque l'utilisateur tape du texte dans ceux-ci ; ...
Le formulaire étant très basique, des champs auraient eu leur place, comme le sexe, l'âge, la localisation ou même le prénom.
Essayez de faire cela vous-même, cela ne sera que bénéfique et positif pour votre apprentissage, croyez-nous ! Ce TP ne vous a-t-il pas trop fatigué ? Non ? Tant mieux, car la suite va être encore pire !
La prochaine partie sera consacrée à la manipulation du code HTML à la volée, directement dans la page, grâce aux fonctions de parcours, aux attributs et à la manipulation du DOM. Vous verrez également comment maîtriser l'animation de vos éléments avec jQuery, ce qui est une très bonne chose quand on sait que c'est l'un des plus gros points forts du framework ! Trêve de bavardage, nous vous invitons à passer à la suite, pour que vous puissiez subir un nouveau TP le plus vite possible.
Partie 3 : Manipulation du DOM et animations
La manipulation du DOM se fait d'une manière adaptée en jQuery. Nous allons en voir les différents aspects, et nous traiterons également l'animation, une part extrêmement utilisée par la majorité des développeurs en jQuery !