28220 sujets

CSS et mise en forme, CSS3

Ola Smiley smile

Comment mettre en place un formulaire avec une image qui s'affiche à coté du champ à chaque fois qu'il est valide ?

Je suis partis de cette idée : à chaque touche, j'appele 'makeRequest('test.php')' qui me renvoit oui ou non. Dans le cas présent il me répond toujours oui, c'est pour les tests Smiley smile

Le code du formulaire avec la balise img :

		<p>
			<label for="nom" title="Veuillez saisir votre nom en lettres majuscules" class="oblig">* Nom :</label>
			<input type="text" name="nom" id="nom" title="Veuillez saisir votre nom en lettres majuscules" tabindex="1" onfocus="this.className='focus';" onblur="this.className='normal';" onKeyUp="makeRequest('test.php')"
			value="<? if (isset($_POST['nom'])) print $_POST['nom']; ?>" maxlength="20" onchange="javascript:this.value=this.value.toUpperCase();" />
            <img id="idimg" src="images/check.png" width="14" height="14" border="0" />
		</p>
		<p>
			<label for="prenom" title="Veuillez saisir votre prénom" class="oblig">* Prénom :</label>
			<input type="text" name="prenom" id="prenom" title="Veuillez saisir votre prénom" tabindex="2" onfocus="this.className='focus';" onblur="this.className='normal';" onKeyUp="makeRequest('test.php')"
			value="<? if (isset($_POST['prenom'])) print $_POST['prenom']; ?>" maxlength="30" />
		</p>


le style de la balise idimg :

#idimg{
display: none;
}


donc au début l'image n'est pas affichée...ensuite la fonction m'affiche l'image :

				var leretour = http_request.responseText;
				if(leretour == 1)  document.getElementById('idimg').style.display = 'inline';
				else document.getElementById('idimg').style.display = 'none';


C'est cool, ca marche... C'est après que je suis ennuyé : comme j'utilise un id, je ne peux l'utiliser qu'une fois, donc je ne sais pas comment faire pour afficher l'image devant les autres champs du formulaire ???

Quelqu'un à une idée ?

Laurent
Modifié par laurent_31 (22 Nov 2005 - 19:11)
Je ne sais pas si je saisis ta demande.
Tu voudrais faire le même test pour plusieurs champs ?
Si c'est le cas tu peux surement faire ton test php pour chaque champ vérifié, et les différencier en donnant des nom à tes <p> pour différencier les champs. (ou utiliser la balise fieldset).
Oui c'est ca yyoupla, je désire faire des tests pour chaque champ, et à chaque fois qu'un champ est bon je le coche. Je pense que je vais devoir créer une balise par champ.

De toutes façons ma question au fond est ridicule, puisque si j'utilise la même balise pour tous les champs, j'afficherai l'image en même temps pour tous les champs.

Ce qui me gêne c'est d'être obligé de créer un balise par champ image, ca me semble lourd comme méthode. Donc a tout hasard, si tu as une idée plus mieux Smiley cligne je suis preneur
Modifié par laurent_31 (22 Nov 2005 - 14:05)
De toutes façons, il faudra faire plusieurs tests. (en boucle ou autre)
Donc quitte à refaire un test, autant dans la foulée récupérer le champ testé, et redéfinir l'image positionnée apres.
Comme CSS n'est pas modifiable dymnamiquement, tu vas etre obligé de donner un id à chaque champ, et chaque image...

//edit: Remarque: cf également la notation suivante
p + span {color:#ff0000;}
permettant de définir uniquement un élément <span> situé juste après un <p>
(hélas non supporté par les navigateurs non standards...suivez mon regard...)
Modifié par yyoupla (22 Nov 2005 - 14:37)