Page 1 sur 2
Afficher le message d'erreur juste en face
Posté : 16 sept. 2011, 05:15
par rimie
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
Re: Afficher le message d'erreur juste en face
Posté : 16 sept. 2011, 07:56
par Cyrano
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()
Re: Afficher le message d'erreur juste en face
Posté : 18 sept. 2011, 03:34
par rimie
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>
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 05:14
par rimie
le probleme existe toujours meme en utilisant next
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 08:13
par Cyrano
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.
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 08:18
par rimie
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>
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 08:24
par Cyrano
Décidément... ok, on a la mise en situation, soit. Et alors ? Il faut qu'on se pose les questions à ta place ?
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 08:34
par rimie
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()
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 08:40
par Cyrano
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...
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 08:53
par rimie
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.
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 09:05
par Cyrano
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 ?
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 09:29
par rimie
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.
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 09:34
par Cyrano
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.
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 09:53
par rimie
et c'est quoi la solution d'avoir la meme class sur les meme span qui sont apres chaque champs du formulaire?
Re: Afficher le message d'erreur juste en face
Posté : 19 sept. 2011, 10:05
par Cyrano
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();