bloquer envoi formulaire après vérification js

**knebhi** · 03/06/2009, 17h43

Bonjour,

je travail sur un formulaire et j'ai fait des vérification concernant l'âge.
ces vérifications fonctionne mais le problème c'est qu'au cas où les conditions ne seraient pas rempli je peux quand même envoyer le formulaire.
je voudrai stopper l'envoi et avoir mon alerte au cas où il y aurait un soucis avec le champ âge/

voila une partie de mon formulaire :
form.php (je fais bien entendu appel au code js dans le head du html)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<html>
 
<head> </head>
<form method="post" action="<? echo $URL; ?>" name="formulaire" onSubmit="return (testChamps() && check() && verifAge());">
		<table>
<tr>
				<td>Age :</td>
				<td><input type="text" size="50" name="age_1"  onblur="verifAge(this)"></td>
</tr>
<tr>
<input type="Submit" value="Ajouter">
</tr>
</table>
 
</html>

la fonction verifAge est construite ainsi :
verifAge.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
////verification age_1
function surligne(age_1, erreur) {
	if (erreur)
		age_1.style.backgroundColor = "#fba";
 
	else
		age_1.style.backgroundColor = "";
}
 
function verifAge(age_1) {
	var age = parseInt(age_1.value);
	if (isNaN(age) || age < 0 || age > 111) {
		surligne(age_1, true);
		alert("Veuillez saisir correctement l'âge du locuteur 1");
		return false;
 
	} else {
		surligne(age_1, false);
 
		return true;
	}
}

merci de votre aide

**franculo_caoulene** · 03/06/2009, 18h04

Salut,

Ceci fonctionne comme tu le souhaites :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" method="post" action="p.html" onsubmit="return (f1()&&f2()&&f3());">
    <input id="s" name="s" type="submit" value="submit" />
  </form>
  <script type="text/javascript">
  function f1() {return false;}
  function f2() {return false;}
  function f3() {return true;}
  </script>
</body>
</html>

L'erreur est donc ailleurs.

**knebhi** · 04/06/2009, 10h50

Envoyé par franculo_caoulene

Salut,

Ceci fonctionne comme tu le souhaites :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" method="post" action="p.html" onsubmit="return (f1()&&f2()&&f3());">
    <input id="s" name="s" type="submit" value="submit" />
  </form>
  <script type="text/javascript">
  function f1() {return false;}
  function f2() {return false;}
  function f3() {return true;}
  </script>
</body>
</html>

L'erreur est donc ailleurs.

Je n'ai pas trop bien compris ton code. pourrais tu m'expliquer pourquoi tu met la balise script apres le form et le rôle de function.
merci

**franculo_caoulene** · 04/06/2009, 10h53

1) Mettre le code javascript juste avant </body> n'est qu'une bonne pratique, ça ne change rien à ton problème.
2) f1(), f2() et f3() représentent testChamps(), check(), verifAge() dans ton code.

[edit] 3) Je viens de voir que verifAge() attends un arguments que tu ne passes pas dans le onsubmit.

**knebhi** · 04/06/2009, 11h29

merci pour les explications

j'ai trouvé une chose plus digeste et plus simple pour vérifier l'âge et que j'ajoute à ma fonction check .

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var chkZ = 1;
	 for(i=0;i<document.formulaire.age_1.value.length;++i)
	   if(document.formulaire.age_1.value.charAt(i) < "0"
	   || document.formulaire.age_1.value.charAt(i) > "9")
	     chkZ = -1;
	 if(chkZ == -1) {
	   alert("Cette mention n'est pas un nombre!");
	   document.formulaire.age_1.focus();
	   return false;
	  }

explication : il est recherché signe par signe si la valeur entrée ne contient rien d'autre que des chiffres. Si non, donc si l'utilisateur a entré d'autres caractères, une variable repère du nom de chkZ dans l'exemple est fixée à -1.

cela fonctionne correctement cependant il n'accepte que les nombres entiers.
je voudrais le rectifier pour obtenir des nombres décimaux.
mon souhait est de pouvoir avoir la possibilté de saisir dans ce champs des nombres et des virgules.
je pourrai avoir : 5,2,3 (qui correspondra à 5ans, 2 mois et 3jours)

est ce possible en rectifiant ce code?
merci

**franculo_caoulene** · 04/06/2009, 11h39

Ceci est un autre problème. Poste ta solution et ouvre une nouvelle discussion pour ce nouveau problème.

**knebhi** · 04/06/2009, 11h47

pour vérifier l'âge et empêcher la validation du formulaire j'ai ajouté ceci à ma fonction check :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var chkZ = 1;
	 for(i=0;i<document.formulaire.age_1.value.length;++i)
	   if(document.formulaire.age_1.value.charAt(i) < "."
	   || document.formulaire.age_1.value.charAt(i) > "9")
	     chkZ = -1;
	 if(chkZ == -1) {
	   alert("Cette mention n'est pas un nombre!");
	   document.formulaire.age_1.focus();
	   return false;
	  }

ici j'ai spécifier que les caractères accepté était compris entre . et 9 afin de pouvoir avoir des âges formulés de cette façon :

exemple : 9.2.3(9ans 2 mois et 3jours)

si je ne souhaite avoir que des nombres entiers je remplace le . par un 0

bloquer envoi formulaire après vérification js

JavaScript

Discussions similaires

Partager

Partager