Partage
  • Partager sur Facebook
  • Partager sur Twitter

erreur dans un formulaire interactif

choix d'options

Sujet résolu
Sn@ke Plissken
  • Javascript
    22 août 2011 à 16:44:45

    Bonjour tout le monde,

    J'ai suivi le tuto de Nesquik69 et Thunderseb "Dynamisez vos sites web avec Javascript ! ".
    Et en continuité du TP sur le formulaire interactif, je voudrais afficher une coche verte à côté de chaque éléments de mon formulaire si il est bien remplis ou une croix rouge et un message en cas d'erreur.

    Pour les input de type text ou textarea, aucun problème, ça marche parfaitement.
    Par contre pour les choix d'options (type "radio"), pour lesquels je ne veux afficher que la coche verte lorsqu'un choix est fait, rien ne veux s'afficher.

    Voici le code de mon formulaire :


    <!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<title>Peintures de Perrine POIRIER</title>
		<link rel="stylesheet" type="text/css" href="../style/design.css">
		<link rel="shortcut icon" type="image/x-icon" href="../style/images/logo-pp.png">
	</head>
	<body>
	<!-- insertion de ma banière et de mon menu ( pour lequel j'utilise jquery.js et menu.js ) -->
		<form method="post" enctype="multipart/form-data" action="admin.php?module=admin&amp;action=dep_toile" id="form" >
			<p>
				<label for="titre">Titre de la toile :</label>
				<input type="text" name="titre" id="titre" size="20" maxlength="50" tabindex="10" />
				<span class="bon"> <img src="../style/images/icones/p-coche.png" alt="Valide" /></span>
				<span class="erreur" > <img src="../style/images/icones/p-croix.png" alt="Erreur" /><strong class="rouge"> Le titre de la toile doit avoir au moins 3 caractères.</strong></span>
			</p>
			<p>Type de peinture :
				<label for="aquarelle"><input type="radio" name="type" value="aquarelle" id="aquarelle" /> Aquarelle</label>
				<label for="acrylique"><input type="radio" name="type" value="acrylique" id="acrylique" /> Acrylique</label>
				<span class="bon"> <img src="../style/images/icones/p-coche.png" alt="Valide" /></span>
			</p>
			<p>
				<label for="anc_position">Ancienne position :</label>
				<input type="text" name="anc_position" id="anc_position" size="1" maxlength="2" tabindex="30" />
				<span class="bon"> <img src="../style/images/icones/p-coche.png" alt="Valide" /></span>
				<span class="erreur" > <img src="../style/images/icones/p-croix.png" alt="Erreur" /><strong class="rouge"> La position de la toile doit être un chiffre.</strong></span>
			</p>
			<p>
				<label for="nouv_position">Nouvelle position :</label>
				<input type="text" name="nouv_position" id="nouv_position" size="1" maxlength="2" tabindex="40" />
				<span class="bon"> <img src="../style/images/icones/p-coche.png" alt="Valide" /></span>
				<span class="erreur" > <img src="../style/images/icones/p-croix.png" alt="Erreur" /><strong class="rouge"> La position de la toile doit être un chiffre.</strong></span>
			</p>
			<p>
				<input class="submit" type="submit" value="envoi" tabindex="70" />
			</p>
		</form>
		<!-- insertion de mon pied de page -->
		<script type="text/javascript" src="../libs/jquery.js"></script>
		<script type='text/javascript' src='../libs/menu.js'></script>
		<script type='text/javascript' src='../libs/formulaire.js'></script>
	</body>
</html>


    et celui de mon code javascript formulaire.js :

    // une fonctyion pour ne pas afficher les messages d'erreur
function desactiveBulleErreur()
{
	var spans = document.getElementsByTagName('span'),
		spansLength = spans.length;
	
	for (var i = 0; i < spansLength; i++)
	{
		if (spans[i].className == 'erreur')
		{
			spans[i].style.display = 'none';
		}
	}
}

// une fonction pour ne pas afficher les coches vertes
function desactiveCoche()
{
	var spans = document.getElementsByTagName('span'),
		spansLength = spans.length;
	
	for (var i = 0; i < spansLength; i++)
	{
		if (spans[i].className == 'bon')
		{
			spans[i].style.display = 'none';
		}
	}
}

// une fonction pour récuperer les messages à afficher
function recupBon(b)
{
	while (b = b.nextSibling)
	{
		if (b.className == 'bon')
		{
			return b;
		}
	}
	return false;
}
function recupErreur(e)
{
	while (e = e.nextSibling.nextSibling)
	{
		if (e.className == 'erreur')
		{
			return e;
		}
	}
	return false;
}

// vérification du formulaire
var verif = {}; // on crée un objet littéral

verif['textes'] = function (id)
{
	var textes = document.getElementById(id),
		bonStyle = recupBon(textes).style,
		erreurStyle = recupErreur(textes).style;
	
	if (textes.value.length >= 3)
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (textes.value.length < 3 && textes.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['nom'] = verif['textes'];
verif['prenom'] = verif['textes'];
verif['titre'] = verif['textes'];
verif['date'] = verif['textes'];
verif['titre1'] = verif['textes'];
verif['titre2'] = verif['textes'];
verif['titre3'] = verif['textes'];
verif['titre_toile'] = verif['textes'];

verif['textarea'] = function (id)
{
	var textarea = document.getElementById(id),
		bonStyle = recupBon(textarea).style,
		erreurStyle = recupErreur(textarea).style;
	
	if (textarea.value.length >= 3)
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (textarea.value.length < 3 && textarea.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};

verif['message'] = verif['textarea'];
verif['commentaire'] = verif['textarea'];
verif['texte'] = verif['textarea'];

verif['email'] = function (id)
{
	var email = document.getElementById(id),
		bonStyle = recupBon(email).style,
		erreurStyle = recupErreur(email).style;
	
	if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(email.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (email.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['lien'] = function (id)
{
	var lien = document.getElementById(id),
		bonStyle = recupBon(lien).style,
		erreurStyle = recupErreur(lien).style;
	
	if (/^(www\.)?[a-zA-Z0-9._-]+\.[a-z]{2,6}$/.test(lien.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (lien.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['lien1'] = verif['lien'];
verif['lien2'] = verif['lien'];
verif['lien3'] = verif['lien'];

verif['chiffre'] = function (id)
{
	var chiffre = document.getElementById(id),
		bonStyle = recupBon(chiffre).style,
		erreurStyle = recupErreur(chiffre).style;
	
	if (/^\d+$/.test(chiffre.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (/^\D+$/.test(chiffre.value))
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['anc_position'] = verif['chiffre'];
verif['nouv_position'] = verif['chiffre'];
verif['position'] = verif['chiffre'];

verif['type'] = function ()
{
	var type = document.getElementsByName('type'),
		bonStyle = recupBon(type[1].parentNode).style;
	
	if (type[0].checked || type[1].checked)
	{
		bonStyle.display = 'inline-block';
		return true;
	}
	else
	{
		bonStyle.display = 'none';
		return false;
	}
};

// mise en place des évenements
(function()
{
	var form = document.getElementById('form'),
	inputs = document.getElementsByTagName('input'),
	inputsLength = inputs.length,
	textarea = document.getElementsByTagName('textarea'),
	textareaLength = textarea.length;
	
	for (var i = 0; i < inputsLength; i++)
	{
		if (inputs[i].type == 'text' || inputs[i].type == 'radio')
		{
			inputs[i].onkeyup = function()
			{
				verif[this.id](this.id);
			};
		}
	}
	for (var j = 0; j < textareaLength; j++)
	{
		textarea[j].onkeyup = function()
		{
			verif[this.id](this.id);
		};
	}
}
)();

desactiveCoche();
desactiveBulleErreur();


    J'ai passé un temps fou à rechercher mon erreur et j'y arrive pas.
    Merci de m'aider
    • Partager sur Facebook
    • Partager sur Twitter
    onesat
      22 août 2011 à 17:39:27

      Mais moi je n'arrive même pas à accéder à tes code alors comment pourrais-je t'aider?????????????
      • Partager sur Facebook
      • Partager sur Twitter
      Sn@ke Plissken
      • Javascript
        22 août 2011 à 17:48:00

        il suffit de cliquer sur "cliquer pour afficher".
        Ça évite que mon message fasse 3 pages.
        • Partager sur Facebook
        • Partager sur Twitter
        Sn@ke Plissken
        • Javascript
          23 août 2011 à 19:01:11

          J'ai réussi à trouver mes erreurs.
          Si des fois ça peux aider quelqu'un (on ne sais jamais), je mets le code corrigé.



          // une fonctyion pour ne pas afficher les messages d'erreur
function desactiveBulleErreur()
{
	var spans = document.getElementsByTagName('span'),
		spansLength = spans.length;
	
	for (var i = 0; i < spansLength; i++)
	{
		if (spans[i].className == 'erreur')
		{
			spans[i].style.display = 'none';
		}
	}
}

// une fonction pour ne pas afficher les coches vertes
function desactiveCoche()
{
	var spans = document.getElementsByTagName('span'),
		spansLength = spans.length;
	
	for (var i = 0; i < spansLength; i++)
	{
		if (spans[i].className == 'bon')
		{
			spans[i].style.display = 'none';
		}
	}
}

// une fonction pour récuperer les messages à afficher
function recupBon(b)
{
	while (b = b.nextSibling)
	{
		if (b.className == 'bon')
		{
			return b;
		}
	}
	return false;
}
function recupErreur(e)
{
	while (e = e.nextSibling.nextSibling)
	{
		if (e.className == 'erreur')
		{
			return e;
		}
	}
	return false;
}

// vérification du formulaire
var verif = {}; // on crée un objet littéral

verif['textes'] = function (id)
{
	var textes = document.getElementById(id),
		bonStyle = recupBon(textes).style,
		erreurStyle = recupErreur(textes).style;
	
	if (textes.value.length >= 3)
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (textes.value.length < 3 && textes.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['nom'] = verif['textes'];
verif['prenom'] = verif['textes'];
verif['titre'] = verif['textes'];
verif['date'] = verif['textes'];
verif['titre1'] = verif['textes'];
verif['titre2'] = verif['textes'];
verif['titre3'] = verif['textes'];
verif['titre_toile'] = verif['textes'];

verif['textarea'] = function (id)
{
	var textarea = document.getElementById(id),
		bonStyle = recupBon(textarea).style,
		erreurStyle = recupErreur(textarea).style;
	
	if (textarea.value.length >= 3)
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (textarea.value.length < 3 && textarea.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};

verif['message'] = verif['textarea'];
verif['commentaire'] = verif['textarea'];
verif['texte'] = verif['textarea'];

verif['email'] = function (id)
{
	var email = document.getElementById(id),
		bonStyle = recupBon(email).style,
		erreurStyle = recupErreur(email).style;
	
	if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(email.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (email.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['mail_artiste'] = verif['email'];
verif['mail_webmestre'] = verif['email'];

verif['lien'] = function (id)
{
	var lien = document.getElementById(id),
		bonStyle = recupBon(lien).style,
		erreurStyle = recupErreur(lien).style;
	
	if (/^(www\.)?[a-zA-Z0-9._-]+[^(www\.)]\.[a-z]{2,6}$/.test(lien.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (lien.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['lien1'] = verif['lien'];
verif['lien2'] = verif['lien'];
verif['lien3'] = verif['lien'];
verif['liens'] = verif['lien'];

verif['chiffre'] = function (id)
{
	var chiffre = document.getElementById(id),
		bonStyle = recupBon(chiffre).style,
		erreurStyle = recupErreur(chiffre).style;
	
	if (/^\d+$/.test(chiffre.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (/^\D+$/.test(chiffre.value))
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['anc_position'] = verif['chiffre'];
verif['nouv_position'] = verif['chiffre'];
verif['position'] = verif['chiffre'];
verif['largeur'] = verif['chiffre'];
verif['hauteur'] = verif['chiffre'];
verif['nb_mess'] = verif['chiffre'];

verif['type'] = function ()
{
	var type = document.getElementsByName('type'),
		check = false,
		bonStyle = recupBon(type[1].parentNode.nextSibling).style;
	
	for (var c = 0; (c < type.length) && !check; c++)
	{
		check = check || type[c].checked;
		if (check)
		{
			bonStyle.display = 'inline-block';
		}
		else
		{
			bonStyle.display = 'none';
		}
	}
};
verif['liste'] = function (id)
{
	var liste = document.getElementById(id),
		bonStyle = recupBon(liste).style,
		erreurStyle = recupErreur(liste).style;
	
	if (/^(inscrits|test)$/.test(liste.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (liste.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['liste_mail_news'] = verif['liste'];

verif['file'] = function (id)
{
	var file = document.getElementById(id),
		bonStyle = recupBon(file).style,
		erreurStyle = recupErreur(file).style;
	
	if (/(\.jpe?g)$/i.test(file.value))
	{
		bonStyle.display = 'inline-block';
		erreurStyle.display = 'none';
	}
	else if (file.value.length > 0)
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'inline-block';
	}
	else
	{
		bonStyle.display = 'none';
		erreurStyle.display = 'none';
	}
};
verif['image'] = verif['file'];
verif['image1'] = verif['file'];
verif['image2'] = verif['file'];
verif['image3'] = verif['file'];
verif['vignette'] = verif['file'];

// mise en place des évenements
(function()
{
	var form = document.getElementById('form'),
	inputs = document.getElementsByTagName('input'),
	inputsLength = inputs.length,
	textarea = document.getElementsByTagName('textarea'),
	textareaLength = textarea.length;
	
	for (var i = 0; i < inputsLength; i++)
	{
		if (inputs[i].type == 'text')
		{
			inputs[i].onkeyup = function()
			{
				verif[this.id](this.id);
			};
		}
		else if (inputs[i].type == 'radio')
		{
			inputs[i].onclick = function()
			{
				verif[this.name](this.name);
			};
		}
		else if (inputs[i].type == 'file')
		{
			inputs[i].onchange = function()
			{
				verif[this.id](this.id);
			};
		}
	}
	for (var j = 0; j < textareaLength; j++)
	{
		textarea[j].onkeyup = function()
		{
			verif[this.id](this.id);
		};
	}
	
}
)();

desactiveCoche();
desactiveBulleErreur();
          • Partager sur Facebook
          • Partager sur Twitter

          erreur dans un formulaire interactif

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown