Afficher le message d'erreur juste en face

16 sept. 2011, 05:15

Bonjour,

J'ai un formulaire avec 3 champs: nom, prenom et ville, j'aimerais afficher un message d'erreur juste en face de leurs champs qui ont la meme class:

Nom: <input type="text" ...  ><span class="info">
Prenom <input type="text" ...  ><span class="info">
Ville <input type="text" ...  ><span class="info">

comment puis je afficher le message d'erreur juste en face du champs selectionne, par exemple, si le champs nom est vide je voudrais afficher "Veuillez remplir votre nom".

Merci

16 sept. 2011, 07:56

Voici un peu de lecture pour ça (en anglais)
Sinon en français, il y a d'instructives informations sur le DOM et les méthodes sur selfhtml, regarde entre autres choses la manière d'utiliser appendChild()

18 sept. 2011, 03:34

j'ai mis ce code:

$(this).parent().find('.showImg').fadeIn('normal').html('<img src="success.png" width="20" height="20" align="absmiddle">');

sachant que showImg est la class des erreurs qui est en face des champs input:

Nom: <input ...><span class="showImg"></span>
Prenom: <input ...><span class="showImg"></span>
Ville <input ...><span class="showImg"></span>

19 sept. 2011, 05:14

le probleme existe toujours meme en utilisant next

19 sept. 2011, 08:13

rimie, on dirait que tu considère qu'on donne ici dans la divination. Ce serait une idée que tu te relises en te demandant ce qu'on peut bien comprendre. En tous cas pour ma part, je ne sais pas trop à quoi tu fais référence : « le problème », de quel problème parles-tu au juste ? Tu dis qu'il existe toujours mais comme tu en fais mention pour la première fois, il est difficile d'avoir une idée précise.

19 sept. 2011, 08:18

alors j'ai 2 evenements (focusout et submit) sur une fonction verif(), je veux que le code erreur s'affiche en face de l'element, autrement dit, chaque element du formulaire a une span avec la class info, voila une partie du code:

<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    
    var regFrm       = $('.regFrm');
    var username     = $('.classUsr');
    var nom          = $('.classNom');
    
    
    function verif() {
        
        
        $.ajax({
	type: 'POST',
	url: 'verif.php',
	data : dataString, 
    dataType: "json",
	success: function(data)
		{ 	
          if(data.usr == 'count')
            {
                $(this).next('.info').html('Veuillez remplir votre pseudo');
            }
            else
            {
                $(this).next('.info').html('Merci');
            }
                
        
        }
    
    });
    
    }
    
    regFrm.focusout(function(){
    verif();
    return false;
    });
        
    regFrm.submit(function(){  
    verif();
    return false;
           
});
    
    
    });
    
    
</script>
    
</head>
<body>
<input type="text" name="username" value="" size="20" maxlength="30" class="classUsr" id="username" />
<span class="info"></span>

<input type="text" name="nom" value="" size="20" maxlength="30" class="classNom" id="nom" />
<span class="info"></span>

</body>

19 sept. 2011, 08:24

Décidément... ok, on a la mise en situation, soit. Et alors ? Il faut qu'on se pose les questions à ta place ?

19 sept. 2011, 08:34

alors, le code ne marche pas chez moi, il affiche toujours 'Veuillez remplir votre pseudo' et non 'Merci', vous allez dire que la condition n'est pas rempli, je vous reponds par, si je change info du premier champs a 'Infos':

$('.Infos').show().html('Veuillez remplir votre pseudo');

$('.Infos').show().html('Merci');

ca marche, le probleme vient donc de:

$(this).next()

19 sept. 2011, 08:40

Ok : selon toi, « $(this) » est une référence à quel élément dans ton formulaire ? Formulaire qui, au passage n'en est pas un si je me fie à ton code puisqu'il n'y a en réalité que deux champs directement dans le body et rien d'autre...

19 sept. 2011, 08:53

Ok : selon toi, « $(this) » est une référence à quel élément dans ton formulaire ? Formulaire qui, au passage n'en est pas un si je me fie à ton code puisqu'il n'y a en réalité que deux champs directement dans le body et rien d'autre...

ah, j'ai oublie la partie form, c'est la class de la balise form, je ne veux pas tous coller sinon des dizaines de lignes.

19 sept. 2011, 09:05

Mouais, ok, mais ça ne répond pas vraiment à la question.

Dans ta fonction, tu utilises $(this) mais je doute fort que tu aies une idée très précise de ce à quoi ça correspond.
Quand tu fais ceci : « $(this).next('.info').html('Veuillez remplir votre pseudo'); », le « $(this) » devrait correspondre à un champ précis de ton formulaire : où dans ton code l'indiques-tu pour que le message soit bien inséré au bon endroit ?

Tu as court-circuité une série de tests divers, mais le problème est qu'ils sont indispensables. En outre, tu utilises des éléments non définis. As-tu regardé dans la console de Firebug quels messages d'erreur tu as ?

19 sept. 2011, 09:29

je n'ai pas aucun message d'erreur, le $(this) si j'ai bien compris revient sur la class du formulaire qui est regFrm, qui a etait mentionne dans mon code par:

regFrm.focusout(function(){
    verif();
    return false;
    });
       
    regFrm.submit(function(){  
    verif();
    return false;

alors si je change $(this) par $('.classUsr'), ca change rien, toujours le meme probleme.

19 sept. 2011, 09:34

Sauf que là, ça se passe à l'intérieur de la fonction.

Et je te signale que si tu pointes sur un élément par sa classe CSS, tu auras un tableau d'éléments, pas un élément unique. Or tu disposes d'identifiant dans tes champs de formulaire.

Par ailleurs, si le $(this) correspond à ton formulaire, alors il ne se passe rien puisqu'aucun élément avec une classe .info n'existe après ce formulaire.

19 sept. 2011, 09:53

et c'est quoi la solution d'avoir la meme class sur les meme span qui sont apres chaque champs du formulaire?

19 sept. 2011, 10:05

Ton processus Ajax récupère du JSON, c'est déjà un bon point, et il semble que les champs soient identifiés dans ce retour. Donc, tu pourrais pointer directement sur les champs appropriés, et par leur id au lieu d'une classe. Ça ressemblerait donc davantage à ceci : $('#username').next('.info').html('Veuillez remplir votre pseudo').show();

Afficher le message d'erreur juste en face

Qui est en ligne