formulaire JQuery

Lalayna
Javascript

Bonjour !
Je débute avec JQuery et je m'exerce en ce moment sur la vérification des champs d'un formulaire. Je me suis aider du tutoriel de Grafikart: https://www.youtube.com/watch?v=LwsDf3PIdPc
Mais il me reste juste à ajouter un message d'erreur à côté de chaque champ lorsqu'on en ressort. Je sèche sur ce point.
Je vous partage mon code : https://jsfiddle.net/tev5m43L/.

Si quelqu'un à des solutions, je suis toute ouïe !

Merci par avance.
:)

5 réponses

Arzou
Réponse acceptée

Hello !
Tu peux faire les mêmes methodes et les mêmes tests en ecoutant le "focus out" de tes inputs. Genre : 

$("input").focusout(function(){

        valid = true; 
        if($("#nom").val() == "") { 
            $("#nom").next(".error").fadeIn().text("Veuillez entrer votre nom"); 
            valid=false;
        }

 });

Ensuite, je te conseille de pas trop t'atarder sur jQuery .. c'était sympa il y a quelques années mais maintenant ... le Js pur est beaucoup plus accessible. Si tu connais JS, tu pourras utiliser jQuery si tu dois l'utiliser, en revanche, l'inverse est plus compliqué :)

Lalayna
Auteur

oops je pensais qu'en cliquant sur le tick en vert je pouvais te citer,
Merci pour ton retour mais en faite je souhaite que lorsque je clique sur le deuxième champ "prénom", sans avoir remplis le premier champ "nom", un message d'erreur apparait sur celui-ci. Et ainsi de suite... si je clique sur le troisième champ "téléphone" sans avoir remplis le champ "nom" un message d'erreur apparait sur celui-ci.
J'ai essayé de créer une fonction avec la méthode blur, pour chaque champ. Cela fonctionne mais du coup je perds la vérification au click sur le bouton, c'est à dire que lorsque aucun champs n'est remplis tous les messages d'erreurs s'affiche.

Sinon j'utilise JQuery car on nous l'impose dans ma formation ^^

Arzou

Tu as essayé un truc dans le style ? 


$( "input#prenom" ).click(function() {
  $( "input#nom" ).blur();
  $("#nom").next(".error").fadeIn().text("Veuillez entrer votre nom");
});
Lalayna
Auteur

oui, ça ne fonctionne pas non plus :-/

Arzou

Ah mince, ça fonctionne quand je teste moi