vérification formulaire avant envoi

**kOrt3x** · 04/01/2011, 18h58

Bonjour,

J'ai un formulaire où je vérifie les champs avec un javascript, mais lorsque l'on clique sur le bouton "Envoyer", la vérification se fait, mais le formulaire est envoyé même si les champs sont vide.

Voici le code :

Code javascript :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
function verification() {
 
                var verifEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,3}$/;
                var verifTel = /^0[1-9]([\.|\-|\s]*[0-9]{2}){4}$/;
 
                if(document.questionnaire.Nom.value == "") {
                    alert("Veuillez entrer votre nom!");
                    document.questionnaire.nom.focus();
                    return false;
                }
 
                if(document.questionnaire.organisme.value == "")  {
                    alert("Veuillez entrer votre organisme !");
                    document.questionnaire.organisme.focus();
                    return false;
                }
 
                if(document.questionnaire.fonction.value == "")  {
                    alert("Veuillez entrer votre fonction !");
                    document.questionnaire.fonction.focus();
                    return false;
                }
 
                if(document.questionnaire.tel.value == "")  {
                    alert("Veuillez entrer votre téléphone !");
                    document.questionnaire.tel.focus();
                    return false;
                }
 
                if (verifTel.exec(document.questionnaire.tel.value) == null ) {
                    alert("Votre numéro de téléphone est incorrect");
                    document.questionnaire.tel.focus();
                    return false;
                }
 
                if (verifEmail.exec(document.questionnaire.email.value) == null) {
                    alert("Votre email est incorrecte");
                    document.questionnaire.email.focus();
                    return false;
                }
            }

Code html :

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

1
2
 
<form class="formquestionnaire" method="post" name="questionnaire"  onsubmit="return verification();" action="validerInsription.php">                  <fieldset>                     <br />                      <label>Melle/Mmme/M*</label><input type="text"  name="Nom" /><br />                     <br />                      <label>Organisme*</label><input type="text"  name="organisme" /><br />                     <br />                      <label>Fonction*</label><input  type="text" name="fonction" /><br />                     <br  />                      <label>T&eacute;l*</label><input type="text"  name="tel" /><br />                     <br />                      <label>Email*</label><input type="text"  name="email" /><br />                                            <div class="center">                             <input  value="Envoyer" type="submit" />                         </div>                      <br />                 </fieldset>              </form>

Ai-je oublier quelque chose ?

Par avance, merci.

**nault** · 04/01/2011, 19h23

Salut,

Pourrais-tu mettre le code html du formulaire.

a premiere vu, cela doit provenir d'une erreur javascript.

1) mettre tes regex pattern entre guillement
ex var regex = "/[a-zA-Z0-9_-]/";

si ca ne change rien au moin du aura corriger un des problemes

2) ne laisser quune validation a la foi pour ciblier ou est l'erreur :

si ca ne fonctionne pas, bien essaye de faire un alert sur
document.questionnaire.Nom.value facon de voir si tu cible bien la property value.

suggestion :
ne met pas de return false dans tes if et concatener tout les erreur dans un seul alert

ex :

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
23
24
25
26
27
28
29
30
 
function verification() {
 
                var verifEmail = "/^[a-zA-Z0-9_-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,3}$/";
                var verifTel = "/^0[1-9]([\.|\-|\s]*[0-9]{2}){4}$/";
 
		var erreur = '';                
                var send = true ;
 
		if(document.questionnaire.Nom.value == "") {
                    erreur += "Veuillez entrer votre nom! \n";
                    document.questionnaire.nom.focus();
                    send = false;
                }
 
                if(document.questionnaire.organisme.value == "")  {
                    erreur += "Veuillez entrer votre organisme ! \n";
                    document.questionnaire.organisme.focus();
                    send = false;
                }
 
		/* ... autre cas de validation */
 
		if(!send){
			alert(erreur)
			return false;
		}
 
 
}

**SpaceFrog** · 04/01/2011, 19h41

1) mettre tes regex pattern entre guillement
ex var regex = "/[a-zA-Z0-9_-]/";

????????????????????????????

depuis quand ?????

la syntaxe des regexp entre / / est tout à fait correcte, mettre des quotes les transformerait en string !!!
on n'est pas en php

tu dois confondre avec l'autre syntaxe :

Code :

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

new RegExp("expression")

ou là le paramètre doit en effet être un string

Par contre fait plutot des test regexp plutot que exec ...
je pense que le souci vient plutot de là...

**nault** · 04/01/2011, 19h52

Envoyé par SpaceFrog

????????????????????????????

depuis quand ?????

mon erreur desoler

**kOrt3x** · 04/01/2011, 22h38

merci pour vos réponses, j'ai suivis vos remarque et fais les modifications, mais ça ne change rien.

Je vais encore cherché.

**nault** · 04/01/2011, 22h43

as tu essayer de faire un alert sur

Code :

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

alert(document.questionnaire.Nom.value);

aussi j'ai un peu de temps, donc si tu donnais le html, je pourrais y jeter un coup d’œil plus en detail.

**kOrt3x** · 04/01/2011, 22h54

Envoyé par nault

as tu essayer de faire un alert sur
alert(document.questionnaire.Nom.value);

aussi jai un peu de temps, donc si tu donnais le html, je pourrais y jeter un coup d'oeil plus en detail.

oui, voici le 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
17
18
19
20
 
<form class="formquestionnaire" method="post" name="questionnaire" onsubmit="return verification()" action="validerInsription.php">
                <fieldset>
                    <br />
                    <label>Melle/Mmme/M*</label><input type="text" name="Nom" /><br />
                    <br />
                    <label>Organisme*</label><input type="text" name="organisme" /><br />
                    <br />
                    <label>Fonction*</label><input type="text" name="fonction" /><br />
                    <br />
                    <label>T&eacute;l*</label><input type="text" name="tel" /><br />
                    <br />
                    <label>Email*</label><input type="text" name="email" /><br />
 
                        <div class="center">
                            <input value="Envoyer" type="submit" />
                        </div>
                    <br />
                </fieldset>
            </form>

**nault** · 04/01/2011, 23h02

Essaie de remplacer

Code :

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

document.questionnaire.nom.focus();

par

Code :

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

document.questionnaire.Nom.focus();

de mon coté ca marche maintenant

**kOrt3x** · 04/01/2011, 23h05

Envoyé par nault

Essaie de remplacer

document.questionnaire.nom.focus();
par
document.questionnaire.Nom.focus();

de mon coté ça marche maintenant

Rho là ça marche :

Code javascript :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
function verification() {
 
                var verifEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,3}$/;
                var verifTel = /^0[1-9]([\.|\-|\s]*[0-9]{2}){4}$/;
 
 
                if(document.questionnaire.Nom.value == "") {
                    alert("Veuillez entrer votre nom!");
                    document.questionnaire.Nom.focus();
                    return false;
                }
 
                if(document.questionnaire.organisme.value == "")  {
                    alert("Veuillez entrer votre organisme !");
                    document.questionnaire.organisme.focus();
                    return false;
                }
 
 
                if(document.questionnaire.fonction.value == "")  {
                    alert("Veuillez entrer votre fonction !");
                    document.questionnaire.fonction.focus();
                    return false;
                }
 
                if(document.questionnaire.tel.value == "")  {
                    alert("Veuillez entrer votre téléphone !");
                    document.questionnaire.tel.focus();
                    return false;
                }
 
                if (verifTel.exec(document.questionnaire.tel.value) == null ) {
                    alert("Votre numéro de téléphone est incorrect");
                    document.questionnaire.tel.focus();
                    return false;
                }
 
                if (verifEmail.exec(document.questionnaire.email.value) == null) {
                    alert("Votre email est incorrecte");
                    document.questionnaire.email.focus();
                    return false;
                }
 
            }

A force d’être trop dessus, on voit plus les fautes.
Merci pour ton aide

.

**kOrt3x** · 04/01/2011, 23h17

Par contre, j'aimerai ajouter un controle sur des checkbox, mais je sais pas comme faire, voici le code html :

Code html :

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

1
2
3
 
<input name="participation[]" value="matin" type="checkbox" />Le matin<br />
                    <input name="participation[]" value="repasmidi" type="checkbox" />Au coktail d&eacute;jeunatoire<br />

Il faut que je vérifie si au moins une des checkbox est coché.

**Eric2a** · 05/01/2011, 00h59

Salut,

Dans la partie HTML, il faut remplacer...

Code :

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

<input name="participation[]" ... />

par

Code :

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

<input name="participation" ... />

Partie JS...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var checked=false;
var chkBox=document.questionnaire.participation;
for(var i=0;i<chkBox.length;i++){
	if(chkBox[i].checked){
		checked=true;
		break;
	}
}
if(!checked){
	alert('Veuillez cocher...');
	return false;
}

**SpaceFrog** · 05/01/2011, 08h43

Code :

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

verifTel.exec

comme sus dit utilise plutot test

**kOrt3x** · 05/01/2011, 12h48

Envoyé par SpaceFrog

Code :

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

verifTel.exec

comme sus dit utilise plutot test

ok, mais quand j'utilise test, les contrôles sur l'email et le tel ne se fait plus.

Code javascript :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
function verification() {
 
                var verifEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,}$/;
                var verifTel = /^0[1-9]([\.|\-|\s]*[0-9]{2}){4}$/;
 
 
                if(document.questionnaire.Nom.value == "") {
                    alert("Veuillez entrer votre nom!");
                    document.questionnaire.Nom.focus();
                    return false;
                }
 
                if(document.questionnaire.organisme.value == "")  {
                    alert("Veuillez entrer votre organisme !");
                    document.questionnaire.organisme.focus();
                    return false;
                }
 
                if(document.questionnaire.fonction.value == "")  {
                    alert("Veuillez entrer votre fonction !");
                    document.questionnaire.fonction.focus();
                    return false;
                }
 
                if(document.questionnaire.tel.value == "")  {
                    alert("Veuillez entrer votre téléphone !");
                    document.questionnaire.tel.focus();
                    return false;
                }
 
                if(document.questionnaire.email.value == "")  {
                    alert("Veuillez entrer votre email !");
                    document.questionnaire.email.focus();
                    return false;
                }
 
                if (verifTel.test(document.questionnaire.tel.value) == null ) {
                    alert("Votre numéro de téléphone est incorrect");
                    document.questionnaire.tel.focus();
                    return false;
                }
 
 
                if (verifEmail.test(document.questionnaire.email.value) == null) {
                    alert("Votre email est incorrecte");
                    document.questionnaire.email.focus();
                    return false;
                }
 
            }

et je ne vois pas le problème.

**kOrt3x** · 05/01/2011, 18h39

Envoyé par Eric2a

Salut,

Dans la partie HTML, il faut remplacer...

Code :

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

<input name="participation[]" ... />

par

Code :

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

<input name="participation" ... />

Partie JS...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var checked=false;
var chkBox=document.questionnaire.participation;
for(var i=0;i<chkBox.length;i++){
    if(chkBox[i].checked){
        checked=true;
        break;
    }
}
if(!checked){
    alert('Veuillez cocher...');
    return false;
}

ok, par contre il n'y a pas un autre moyen, car je ne peux le modifier, puisqu'il y a des traitements après.

**SpaceFrog** · 05/01/2011, 18h41

parceque test revoie true ou false

Code :

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

1
2
3
4
5
6
var a ="akjhkjhkh"
var b=321654
 
 alert((/^\d+$/.test(a))?'que des chiffres':'pas que des chiffres')
 
 alert((/^\d+$/.test(b))?'que des chiffres':'pas que des chiffres')

**kOrt3x** · 06/01/2011, 15h25

Donc, je ne comprends toujours pas,j'explique :

- quand j'affiche ma page html avec "exec", ça marche correctement.
- par contre, quand mon code html est afficher par mon template php, le javascript ne fonctionne pas pour la vérification du tel et du email.

je ne vois pas ou est le problème....

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
 
var verifTel = new RegExp("^0[1-9]([\ |\_|\.|\-|\s]*[0-9]{2}){4}$");
 
                if (verifTel.test(document.questionnaire.tel.value) == null ) {
                    alert("Votre numéro de téléphone est incorrect");
                    document.questionnaire.tel.focus();
                    document.getElementById("tel").style.color="red";
                    return false;
                }else {
                    document.getElementById("tel").style.color="black";
                }
 
                var verifEmail = new RegExp("^[a-zA-Z0-9_\\-\\.]{3,}@[a-zA-Z0-9\\-_]{2,}\\.[a-zA-Z]{2,4}$", "g");
 
                if (verifEmail.test(document.questionnaire.email.value) == null) {
                    alert("Votre email est incorrecte");
                    document.questionnaire.email.focus();
                    document.getElementById("email").style.color="red";
                    return false;
                }else {
                    document.getElementById("email").style.color="black";
                }

**Bovino** · 06/01/2011, 16h10

Code :

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

var verifTel = new RegExp("^0[1-9]([\ |\_|\.|\-|\s]*[0-9]{2}){4}$");

* Evite d'utiliser un constructeur, passe plutôt par un littéral.
* Il n'y a pas de OU dans une classe de RegExp.

Code :

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

var verifTel = /^0[1-9]([_.\-\s]*[0-9]{2}){4}$/;

Code :

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

if (verifTel.test(document.questionnaire.tel.value) == null )

Comme déjà expliqué par Spaffy, test() renvoie true ou false, or false != null

Code :

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

if (!verifTel.test(document.questionnaire.tel.value))

**kOrt3x** · 06/01/2011, 17h58

Envoyé par Bovino

Code :

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

var verifTel = new RegExp("^0[1-9]([\ |\_|\.|\-|\s]*[0-9]{2}){4}$");

* Evite d'utiliser un constructeur, passe plutôt par un littéral.
* Il n'y a pas de OU dans une classe de RegExp.

Code :

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

var verifTel = /^0[1-9]([_.\-\s]*[0-9]{2}){4}$/;

Code :

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

if (verifTel.test(document.questionnaire.tel.value) == null )

Comme déjà expliqué par Spaffy, test() renvoie true ou false, or false != null

Code :

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

if (!verifTel.test(document.questionnaire.tel.value))

ok, j'ai donc suivi les conseils et voilà comment est mon script :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var verifTel = /^0[1-9]([_.\-\s]*[0-9]{2}){4}$/;
 
 
                if (!verifTel.test(document.questionnaire.tel.value)) {
                    alert("Votre numéro de téléphone est incorrect");
                    document.questionnaire.tel.focus();
                    document.getElementById("tel").style.color="red";
                    return false;
                }else {
                    document.getElementById("tel").style.color="black";
                }

Par contre, dans ma page html ça marche, mais quand mon html est affiché par mon template, ça ne fonctionne pas.
C'est bizarre.

**kOrt3x** · 06/01/2011, 21h49

Bon, j'ai résolu le problème en mettant le javascript dans un fichier externe et non plus directement dans le source HTML.

En tout cas, je vous remercie de votre aide et de vos explications.

Merci.

**haNjo** · 07/01/2011, 09h33

Bonjour, je rejoins ce post car j'ai un problème similaire mais avec un tout petit script qui me pose un soucis:
JavaScript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type='text/javascript'> 
	function isAlphabet(elem, helperMsg) { 
		var alphaExp = /^[a-zA-Z]+$/;  
		if(elem.value.match(alphaExp)) { 
			return true;  
		}
		else { 
			alert(helperMsg); 
			elem.focus(); 
			return false; 
		} 
	} 
</script>

Formulaire

Code :

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

1
2
3
4
5
6
<form method="post" onSubmit="return isAlphabet(document.getElementById('new_name'), 'Letters Only Please')" action="index.php?page=managementStaff" id="addStaff">
	<img src="design/warning.png"><span style="font-size: 14px;color: red;"> Must have a name</span><br />
	<label>Name</label><input type="texte" name="new_name"><br/>
	<label>Surname</label><input type="texte" name="new_surname"><br/>
	<input type="submit" value="Add">
<form>

Dans la doc de ce script, j'ai lu que le

Code :

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

isAlphabet(document.getElementById('new_name'), 'Letters Only Please')"

devait être sur le bouton avec un onclick="" mais le résultat est le même, je ne peux plus rien entrer dans mon formulaire...

De plus, si je veux faire le contrôle sur les 2 input de mon formulaire, je dois cumuler 2 scripts ou je peux demander la vérifications des deux champs?

Merci beaucoup.

vérification formulaire avant envoi

JavaScript

Discussions similaires

Partager

Partager