vérification formulaire avant envoi

Version imprimable

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:

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:

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.

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:

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;
		}
 
 
}

04/01/2011, 19h41
SpaceFrog

Citation:

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:

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à...
04/01/2011, 19h52
nault

Citation:

Envoyé par SpaceFrog

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

depuis quand ?????

mon erreur desoler :oops:
04/01/2011, 22h38
kOrt3x

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

Je vais encore cherché.:cry:
04/01/2011, 22h43
nault

as tu essayer de faire un alert sur

Code:

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.

Citation:

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:

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>

04/01/2011, 23h02
nault

Essaie de remplacer

Code:

document.questionnaire.nom.focus();

par

Code:

document.questionnaire.Nom.focus();

de mon coté ca marche maintenant

Citation:

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:

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 :ccool:.

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

1 2 3 <input name="participation[]" value="matin" type="checkbox" />Le matin<br /> <input name="participation[]" value="repasmidi" type="checkbox" />Au coktail déjeunatoire<br />
Il faut que je vérifie si au moins une des checkbox est coché.

Salut,

Dans la partie HTML, il faut remplacer...

Code:

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

par

Code:

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

Partie JS...
Code:

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; }

05/01/2011, 08h43
SpaceFrog

Code:

verifTel.exec

:roll:

comme sus dit utilise plutot test

Citation:

Envoyé par SpaceFrog

Code:

verifTel.exec

:roll:

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:

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. :koi:

Citation:
Envoyé par Eric2a
Salut,

Dans la partie HTML, il faut remplacer...

Code:

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

par

Code:

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

Partie JS...
Code:

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.

parceque test revoie true ou false

Code:

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')

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.... :cry:

Code:

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";
                }

06/01/2011, 16h10
Bovino

Code:

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:

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

Code:

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

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

Code:

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

Citation:

Envoyé par Bovino

Code:

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:

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

Code:

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

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

Code:

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

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

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.

06/01/2011, 21h49
kOrt3x

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.

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:

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:

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:

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.

10/01/2011, 17h25
skandhal
Salut à toi, j'ai vu que tu avais résolu ton problème mais je tiens à préciser 2 petits points :mouarf:

Tu peux faire:
Code:

1 2 3 <form name='nom_du_formulaire' method='post' action='./ta_page_php.php'>  <input id="button" type="submit" value="Envoyer" onclick='return check_form();' />
Tu appelles donc ton script JS quand tu cliques sur le bouton "Envoyer" (le JS peut être dans un fichier.js ou dans le <head> de la page html), si la réponse est "true" alors ta_page_php.php sera appelée, sinon tu peux afficher un alert pour indiquer à l'utilisateur son erreur (ou afficher les messages d'erreurs qui sont cachés dans ta page).

Si tu veux un exemple, suffit de me faire signe ;)
10/01/2011, 18h09
kOrt3x
Citation:
Envoyé par skandhal

Salut à toi, j'ai vu que tu avais résolu ton problème mais je tiens à préciser 2 petits points :mouarf:

Tu peux faire:

Code:

1 2 3 <form name='nom_du_formulaire' method='post' action='./ta_page_php.php'>  <input id="button" type="submit" value="Envoyer" onclick='return check_form();' />

Tu appelles donc ton script JS quand tu cliques sur le bouton "Envoyer" (le JS peut être dans un fichier.js ou dans le <head> de la page html), si la réponse est "true" alors ta_page_php.php sera appelée, sinon tu peux afficher un alert pour indiquer à l'utilisateur son erreur (ou afficher les messages d'erreurs qui sont cachés dans ta page).

Si tu veux un exemple, suffit de me faire signe ;)
Merci pour ces précisions.
:ccool: