Validation formulaire impossible

Fermé

michou86 Messages postés 2 Date d'inscription jeudi 2 juin 2011 Statut Membre Dernière intervention 3 juin 2011 - 2 juin 2011 à 15:24
michou86 Messages postés 2 Date d'inscription jeudi 2 juin 2011 Statut Membre Dernière intervention 3 juin 2011 - 3 juin 2011 à 10:29

Bonjour,

Je suis en train de faire une petite application html qui référence les livres d'une bibliothèque privée. J'ai une page "référence des livres" qui se compose de champs de saisie texte (titre, auteur, etc...) et de boutons radio pour choisir le genre du livre. Lorsque je vérifie à l'aide de JavaScript si l'utilisateur a bien rempli les champs de saisie et coché l'un des boutons radio avant de valider, quand on appuie sur "submit" le formulaire ne se valide pas (il renvoie sans cesse la boite d'alerte de vérification).
Cela fait 3 jours que je cherche sur Internet et que j'essaie de faire tous les codes possibles et imaginables, mais la validation ne fonctionne toujours pas.
Je vous soumets le code de ma page. Quelqu'un pourrait-il me dire ce qui ne va pas (je débute en JavaScript) ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Page enregistrement</title>
<link rel="stylesheet" type="text/css" href="./styles.css">


<script type="text/javascript" >
function test()
{
var ok=0;
if (document.formulaire1.titre.value=='')
{
document.formulaire1.titre.value=prompt('Veuillez remplir le champ "Titre" :');
ok=1;
}
if (document.formulaire1.auteur.value=='')
{
document.formulaire1.auteur.value=prompt('Veuillez remplir le champ "Auteur" :');
ok=1;
}
if (document.formulaire1.editeur.value=='')
{
document.formulaire1.editeur.value=prompt('Veuillez remplir le champ "Editeur" :');
ok=1;
}
if (document.formulaire1.genre.value=='')
{
document.formulaire1.genre.value=prompt('Veuillez remplir le champ "Genre" :');
ok=1;
}
if (ok==0)
{
return true;
}
else
{
return false;
}
}
</script>


<script type="text/javascript" >
function verifRadio()
{
oui=document.formulaire1.genre[0].checked;
non=document.formulaire1.genre[1].checked;
if (oui==false & non==false)
{
window.alert("Vous n'avez pas indiqué le genre du livre");
return false;
}
else
{
return true;
}
}
</script>
</head>

<body>
<div>
<form method="post" action="" name="formulaire1" onsubmit="return verifRadio();">
<table class="table_form" cellpadding="0" cellspacing="0">
<caption class="gros_titre">Nouveau livre</caption>


<tr>
<td>
<fieldset>
<legend class="texte_fieldset">Références du livre</legend>
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td class="legende"><label for="titre">Titre : </label></td>
<td><input name="titre" id="titre" type="text" size="40" class="champ"></td>
</tr>

<tr>
<td class="legende"><label for="auteur">Auteur : </label></td>
<td><input name="auteur" id="auteur" type="text" size="30" class="champ"></td>
</tr>

<tr>
<td class="legende"><label for="editeur">Éditeur : </label></td>
<td><input name="editeur" id="editeur" type="text" size="30" class="champ"></td>
</tr>
<tr>
<td height="5"> </td>
</tr>
<tr>
<td><input type="reset" name="reset" value=" Recommencer " class="bouton_simple"></td>
</tr>
</table>
</fieldset>


<fieldset>
<legend class="texte_fieldset">Genre</legend>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="radio" name="genre" id="roman" value="roman"><label for="roman" class="legende">Roman</label><br>
<input type="radio" name="genre" id="informatique" value="informatique"><label for="informatique" class="legende">Informatique</label><br>
<input type="radio" name="genre" id="sante" value="sante"><label for="sante" class="legende">Santé</label><br>
<input type="radio" name="genre" id="spiritualite" value="spiritualite"><label for="spiritualite" class="legende">Spiritualité</label><br>
<input type="radio" name="genre" id="cuisine" value="cuisine"><label for="cuisine" class="legende">Cuisine</label><br>
<input type="radio" name="genre" id="bricolage" value="bricolage"><label for="bricolage" class="bricolage">Bricolage</label><br>
<input type="radio" name="genre" id="nature" value="nature"><label for="nature" class="legende">Nature</label><br>
<input type="radio" name="genre" id="photo" value="photo"><label for="photo" class="legende">Photo</label><br>
<input type="radio" name="genre" id="bd" value="bd"><label for="bd" class="legende">Bande dessinée</label><br>
<a href="../projet/genre.html" style="text-decoration:none"><input type="radio" name="genre" id="autre" value="autre"><label for="autre" class="legende">Autre... </label></a ><span class="autre">(cliquez sur "Autre..." si le genre de votre livre ne figure pas dans cette liste)</span>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>

<tr>
<td>
<input type="reset" name="reset" value=" Tout recommencer " class="bouton_simple2">
<input type="submit" name="submit" value=" Valider " class="bouton_simple" onclick="test();">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

Je vous remercie d'avance pour votre aide, car je n'y arrive pas seul.

A voir également:

Validation formulaire impossible
Formulaire de réclamation facebook - Guide
Temps validation annonce le bon coin - Forum Hotmail / Outlook.com
Commande en cours de validation fnac - Forum Consommation & Internet
Civilité sur un formulaire - Forum VB / VBA
Excel validation des données liste - Guide

1 réponse

Réponse 1 / 1

michou86 Messages postés 2 Date d'inscription jeudi 2 juin 2011 Statut Membre Dernière intervention 3 juin 2011
3 juin 2011 à 10:29

Re Bonjour,

Personne pour m'aider ?

Bon, après bien des recherches mes codes évoluent, mais mon formulaire ne se valide toujours pas.
Sur ma page d'enregistrement de livres, j'ai entre autres des boutons radio pour cocher le genre du livre, et un champ de saisie pour entrer le genre au cas où il ne serait pas dans la liste. J'envoie un test JS pour vérifier que mes champs sont remplis. Si l'utilisateur entre le genre du livre par bouton radio et appuie sur "submit", le formulaire se valide normalement. Mais s'il entre le genre du livre par le champ de saisie, l'appui sur "submit" ne valide pas le formulaire (la boite d'alerte se ré-affiche sans arrêt à chaque clic sur "submit" ). Voici 4 jours que je planche dessus, mais sans succès. La console d'erreurs ne me renvoie rien. Si quelqu'un pouvait me donner un coup de main je lui en serais très reconnaissant.

Voici mon nouveau code de vérification JavaScript:

<script type="text/javascript" >
	/*Teste les boutons radio :*/
	function verifRadio()
	{
		var radio=document.formulaire1.genre;
		var champ=document.formulaire1.autre_genre;
		var rlength=radio.length;
		var oui=false;
		for (var z=0; z<rlength; z++)
		{
			if (radio[z].checked && champ!='')
			{
				oui=true;
			}
		}
		if (oui)
		{
			return true;
		}
		else
		{
			window.alert("Vous n'avez pas indiqué le genre du livre");
			return false;
		}
	}
</script>

Et voici le code de la page html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
<html>
<head>
<title>Page enregistrement</title>

<link rel="stylesheet" type="text/css" href="./styles.css">

<script type="text/javascript" >
	/*Teste les champs de saisie texte :*/
	function test()
		{
			var ok=0;
			if (document.formulaire1.titre.value=='')
			{
				document.formulaire1.titre.value=prompt('Veuillez remplir le champ "Titre" :');
				ok=1;
			}
				if (document.formulaire1.auteur.value=='')
			{
				document.formulaire1.auteur.value=prompt('Veuillez remplir le champ "Auteur" :');
				ok=1;
			}
			if (document.formulaire1.editeur.value=='')
			{
				document.formulaire1.editeur.value=prompt('Veuillez remplir le champ "Editeur" :');
				ok=1;
			}
			if (document.formulaire1.genre.value=='')
			{
				document.formulaire1.genre.value=prompt('Veuillez remplir le champ "Genre" :');
				ok=1;
			}
			if (ok==0)
			{
				return true;
			}
			else
			{
				return false;
			}
		}	
</script>


<script type="text/javascript" >
	/*Teste les boutons radio :*/
	function verifRadio()
	{
		var radio=document.formulaire1.genre;
		var champ=document.formulaire1.autre_genre;
		var rlength=radio.length;
		var oui=false;
		for (var z=0; z<rlength; z++)
		{
			if (radio[z].checked && champ!='')
			{
				oui=true;
			}
		}
		if (oui)
		{
			return true;
		}
		else
		{
			window.alert("Vous n'avez pas indiqué le genre du livre");
			return false;
		}
	}
</script>
</head>

<body>
	<div>
	<form method="post" action="" name="formulaire1" onsubmit="return verifRadio();">
	<table class="table_form" cellpadding="0" cellspacing="0">
	<caption class="gros_titre">Nouveau livre</caption>
		<tr>
			<td>
				<fieldset>
					<legend class="texte_fieldset">Références du livre</legend>
						<table border="0" cellpadding="0" cellspacing="10">
								<tr>                
									<td class="legende"><label for="titre">Titre&nbsp;:&nbsp;</label></td>
									<td><input name="titre" id="titre" type="text" size="40" class="champ"></td>
								</tr>
				
								<tr>
									<td class="legende"><label for="auteur">Auteur&nbsp;:&nbsp;</label></td>
									<td><input name="auteur" id="auteur" type="text" size="30" class="champ"></td>
								</tr>
								
								<tr>
									<td class="legende"><label for="editeur">Éditeur&nbsp;:&nbsp;</label></td>
									<td><input name="editeur" id="editeur" type="text" size="30" class="champ"></td>
								</tr>
								<tr>
									<td height="5">&nbsp;</td>								
								</tr>
								<tr>
									<td><input type="reset" name="reset" value="   Recommencer   " class="bouton_simple"></td>
								</tr>
							</table>		
				</fieldset>
				
				<fieldset>
					<legend class="texte_fieldset">Genre</legend>
						<table border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td>
								<input type="radio" name="genre" id="roman" value="roman"><label for="roman" class="legende">Roman</label><br>
								<input type="radio" name="genre" id="informatique" value="informatique"><label for="informatique" class="legende">Informatique</label><br>
								<input type="radio" name="genre" id="sante" value="sante"><label for="sante" class="legende">Santé</label><br>
								<input type="radio" name="genre" id="spiritualite" value="spiritualite"><label for="spiritualite" class="legende">Spiritualité</label><br>
								<input type="radio" name="genre" id="cuisine" value="cuisine"><label for="cuisine" class="legende">Cuisine</label><br>
								<input type="radio" name="genre" id="bricolage" value="bricolage"><label for="bricolage" class="bricolage">Bricolage</label><br>
								<input type="radio" name="genre" id="nature" value="nature"><label for="nature" class="legende">Nature</label><br>
								<input type="radio" name="genre" id="photo" value="photo"><label for="photo" class="legende">Photo</label><br>
								<input type="radio" name="genre" id="bd" value="bd"><label for="bd" class="legende">Bande dessinée</label><br>
								</td>
							</tr>
							
							<tr>
								<td>&nbsp;</td>							
							</tr>
							
							<tr>
								<td class="legende">
									<label for="autre_genre">Autre genre :&nbsp;</label><input type="text" name="autre_genre" id="autre_genre" size="30" class="champ">
								</td>
							</tr>							
							
						</table>
				</fieldset>
				
				<fieldset>
					<legend class="texte_fieldset">Fiche résumé</legend>
					<textarea name="resume" id="resume" rows="20" cols="110" class="champ">Faites ici un court résumé de votre livre</textarea>				
				</fieldset>	
			</td>
		</tr>	
				
		</tr>	
			<td>
			<input type="reset" name="reset" value="  Tout recommencer  " class="bouton_simple2">
			<input type="submit" name="submit" value="   Valider   " class="bouton_simple" onclick="test();">
			</td>		
		<tr>	
	</table>
	</form>
	</div>
</body>
</html>

D'avance un immense merci pour votre aide.

Discussions similaires

Impossible d'utiliser ce numéro de téléphone pour la validat

Problème de restrictions

Impossible d'utiliser numéro de téléphone validation

Gmail impossible sans numéro de téléphone

Je n'arrive plus à récuperer mon compte Outlook