Bulle d'erreur dans un formulaire HTML

kikou - 9 févr. 2014 à 09:19
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 9 févr. 2014 à 14:10
Bonjour, je débute en développement Web et je souhaiterai savoir comme fais-t-on pour avoir des info bulles d'erreurs dans un formulaire en cas d'une saisie erroné...
Mon formulaire est en HTML/CSS et ma vérification des champs est en js.
Merci pour votre aide
Bonne journée :)

1 réponse

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 9/02/2014 à 15:24
tu peut t'inpirer de ca

<html>
<head>

<script type="text/javascript">

 
 function controle() {
 
 var el=document.getElementById('imp1')
 var el2=document.getElementById('imp2')
 var el3=document.getElementById('imp3')
 
 if(el.value!='coucou'){
 cree_erreur(el,'erreur sur imput 1');
 
 }
 
  if(el2.value!='coucou'){
 cree_erreur(el2,'erreur sur imput 2');
 
 }
 
  if(el3.value!='coucou'){
 cree_erreur(el3,'erreur sur imput 3');
 
 }
 
}

function cree_erreur(el,texte){

	var idr=document.getElementById(el.id+'_r')
	if (!idr){

		var dvr=document.createElement('div');
		dvr.id=el.id+'_r'
		dvr.style.height=62+'px';
		dvr.style.width=80+'px';
		dvr.style.position='absolute';
		dvr.style.left=el.offsetLeft+50+'px';
		dvr.style.top=el.offsetTop-70+'px';
		dvr.style.textAlign='center';
		dvr.style.backgroundImage='url(data:image/png;base64,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)'
		var txt=document.createTextNode(texte) ;
		dvr.appendChild(txt);
		document.body.appendChild(dvr);

	}
}

function destruction(lui){

var idr=document.getElementById(lui.id+'_r')
if (idr){
idr.parentNode.removeChild(idr)
}

}
</script>
 
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<input type='texte' id='imp1' onfocus='destruction(this)'></input>
<input type='texte' id='imp2'onfocus='destruction(this)'></input>
<input type='texte' id='imp3'onfocus='destruction(this)'></input>
<button onclick='controle() '>controle</button>
 
</body>
</html>




cours Forest cours !
0
Rejoignez-nous