Javascript "ignoré"

Vérification de formulaire

Sujet résolu

7 mai 2010 à 18:00:55

Bonjour,

Dans le cadre d'un projet en php, j'ai pensé que ce serait l'occasion d'apprendre un peu de Javascript pour vérifier un formulaire sans recharger la page (en me basant sur le TD du tutoriel: "Tout sur le Javascript"). Le problème, c'est que j'ai beau m'y prendre de diverses manière, j'ai l'impression que le Javascript est simplement ignoré: mon formulaire fonctionne sans problème mais aucune vérification n'est faite et le formulaire est envoyé que le contenu soit "convenable" ou pas. J'ai bien entendu vérifié que JavaScript était bien activé sur mon navigateur (Firefox), j'ai tenté de mettre le contenu de mon fichier "verifformulaire.js" dans le "head"...sans succès.

Voilà mes codes d'abord le Javascript:

function surligne(champ, erreur)
{
	if(erreur)
		champ.style.backgroundColor = "#fba";
	else
		champ.style.backgroundColor = "";
}
function verifname(champ)
{
	if(champ.value.length < 2 || champ.value.length > 25)
	{
		surligne(champ, true);
		return false;
	}
	else
	{
		surligne(champ, false);
		return true;
	}
}
function veriftaille(champ)
{
	var taille
	if(isNaN(taille) || taille <100 || taille > 210)
	{
		surligne(champ,true);
		return false;
	}
	else
	{
		surligne (champ, false);
		return true;
	}
}
function verifage(champ)
{
	var age = parseInt(champ.value);
	if(isNaN(age) || age < 5 || age > 111)
	{
		surligne(champ, true);
		return false;
	}
	else
	{
		surligne(champ, false);
		return true;
	}
}
function verifbudget
{
	var regex = /^[0-9]{1,3},[0-9]{2}$/;
	if(!regex.test(champ.value))
	{
		surligne(champ, true);
		return false;
	}
	else
	{
		surligne(champ, false);
		return true;
	}
}
function verifform(f)
{
	var nameOk = verifname(f.nom);
	var tailleOk = veriftaille(f.taille);
	var ageOk = verifage(f.age);
   
	if(nameOk && tailleOk && ageOk && budgetOK)
		return true;
	else
	{
		alert("Veuillez remplir correctement tous les champs!");
		return false;
	}
}

Puis les parties de mon formulaire html concernées par le Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
		<title>Ajout d'un visiteur.</title>  
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		<script type="text/javascript" src="verifformulaire.js"></script>
   </head> 
   <body> 
    	<?php include("en_tete.php"); 
		include("menus.php"); ?>

		<div id="corps">
			<h2>Inscription d'un nouveau visiteur.</h2>       
			<p>Formulaire pour la création d'une ligne supplémentaire dans la table "visiteurs" de la base de données.</p>
			
			<form method="post" action="ajoutvisiteur.php" onsubmit="return verifform(this)"> 
				<fieldset>
					<legend>Coordonnées personnelles</legend>
					<label for="nom">Nom (entre 2 et 25 caractères):</label>
					<input type="text" name="nom" id="nom" onBlur="verifname(this)"/><br />
					
					<label for="taille">Taille:</label>
					<input type="text" name="taille" id="taille" size="1" maxlength="3" onBlur="veriftaille(this)"/> cm (de 100 à 210 cm)<br />
					
					<label for="age">Age :</label>
					<input type="text" name="age" id="age" size="1" maxlength="3" onBlur="verifage(this)"/> ans (de 5 à 111 ans)<br />
                                        <label for="budget">Budget :</label>
					<input type="text" name="budget" id="budget" size="2" maxlength="6" value="0,00" onBlur="verifbudget(this)"/> €<br />
                                </fieldset>
				
				<p>
				<input type="submit" /> <input type="reset" /> 
				<!-- Permet de créer 2 boutons: 1 pour envoyer les données pour demander la requête SQL 
				et 1 pour remettre tous les champs à leur valeur initiale.-->
				</p>
			</form>
		</div>
		
		<?php include("pied_de_page.php"); ?>
   </body>
</html>

Je soupçonne EasyPHP que j'utilise pour visionner mes pages php d'être à l'origine du problème mais je ne trouve nulle part quoi que ce soit à ce propos.

Help me please!

Cecolympe (désolée pour l'indentation proéminente, il parait que ça déconne depuis peu sur ce site à ce niveau là...)

PeteOyable

7 mai 2010 à 18:04:36

Bonjour,

As tu firebug ?

Si oui, dans ta fonction verifform(), fais un console.log() de ce que tu veux, juste pour voir au moins si la fonction est bien appelé

Cecolympe

7 mai 2010 à 18:08:50

Euh, non, je n'ai pas firebug et c'est du chinois pour moi ce que tu me demandes de faire (enfin j'ai compris le but, ça oui quand même mais n'ayant pas ce fameux Firebug et n'en ayant jamais entendu parler, je ne pense pas savoir comment le faire fonctionner..).
Je précise que les autres fonctions (verifage, veriftaile, etc) ne font pas effet non plus lors du remplissage du formulaire...

PeteOyable

7 mai 2010 à 18:11:21

Alors on le va le faire à l'ancienne dans ta fonction verifform écrit ça au tout début de ta fonction pour voir si elle est appelé :

alert('je passe bien dans cette fonction')

C'est juste un test hein

Golmote

7 mai 2010 à 18:14:38

Et une alert() tout à la fin aussi... pour voir si elle plante ou pas...

Puis console d'erreur toussa...

Cecolympe

7 mai 2010 à 18:18:23

Done...
J'avais pensé le faire, mais après une journée de labo, j'ai zappé ça de ma mémoire, mais malheureusement ça ne marche pas, j'ai essayé pour 2 autres fonctions après (tant que j'y était...).

Pour Golmote, le test précédent n'étant pas concluant, je pense que mes fonctions ne sont tout simplement pas appelée... Console d'erreur; tu pourrais être plus explicite pour une vraie Zéro? :-°

PeteOyable

7 mai 2010 à 18:22:34

Citation : Cecolympe

Pour Golmote, le test précédent n'étant pas concluant, je pense que mes fonctions ne sont tout simplement pas appelée... Console d'erreur; tu pourrais être plus explicite pour une vraie Zéro?

Va dans l'onglet Outils dans Firefox et clique sur la console d'erreurs.

Après vérifications, j'ai trouvé :

verifbudget()

et non :

verifbudget

Cecolympe

7 mai 2010 à 18:30:13

Bon, ben j'ai eu droit à mon petit miracle de la journée^^
Si j'avais eu connaissance de cette console d'erreur plus tôt, mon problème aurait été résolu depuis longtemps (je traine ça depuis des semaines, ayant des choses plus importantes à faire dans mon projet).

L'erreur était vraiment bateau...

function verifbudget

devait être changé en

function verifbudget(champ)

Ils me mettaient aussi que la fonction "verifform" serait non définie, mais la modification précédente à débugué tout mon script...

Merci beaucoup les gars pour votre efficacité à donner de bonnes pistes!

Bon weekend!

EDIT: On a trouvé au même moment alors

PeteOyable

7 mai 2010 à 18:31:40

Pense à mettre ton post en résolu

Cecolympe

7 mai 2010 à 18:33:23

C'était déjà fait, j'ai été sensibilisée lors de la campagne bien que je n'avais jamais posté sur le forum à l'époque.

PeteOyable

7 mai 2010 à 18:34:38

Bien joué