Afficher le message d'erreur juste en face

par **rimie** » 20 sept. 2011, 02:26

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();

voila le code final:

afficher une icone error.png

$('#username').next('#info').fadeIn('normal').html('<img src="error.png" width="20" height="20">');

et sur la ligne suivante, afficher un message d'erreur

$('#username').next('#infoTxt').fadeIn('normal').html('<b>Veuillez remplir votre pseudo</b>');

avec le code formulaire:

<div>
<input type="text" name="username" value="" autocomplete="on" size="25" maxlength="30" id="username" />
<span id="info"></span>
</div>
<div id="infoTxt"></div>

le texte "Veuillez remplir votre pseudo" ne s'affiche pas

par **Cyrano** » 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();

par **rimie** » 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?

par **Cyrano** » 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.

par **rimie** » 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.

par **Cyrano** » 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 ?

par **rimie** » 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.

par **Cyrano** » 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...

par **rimie** » 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()

par **Cyrano** » 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 ?

par **rimie** » 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>

par **Cyrano** » 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.

par **rimie** » 19 sept. 2011, 05:14

le probleme existe toujours meme en utilisant next

par **rimie** » 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>

par **Cyrano** » 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()

Afficher le message d'erreur juste en face

Répondre

Étendre la vue Revue du sujet : Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face

Re: Afficher le message d'erreur juste en face