vérification formulaire avant envoi [Résolu]

[kOrt3x]

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 :

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 :

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]

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

[SpaceFrog]

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à...

[nault]

Envoyé par SpaceFrog

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

depuis quand ?????

mon erreur desoler

[kOrt3x]

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

Je vais encore cherché.

[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.

[kOrt3x]

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>

[nault]

Essaie de remplacer

Code :

document.questionnaire.nom.focus();

par

Code :

document.questionnaire.Nom.focus();

de mon coté ca marche maintenant

[kOrt3x]

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 :

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]

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

Code html :

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]

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

[SpaceFrog]

Code :

verifTel.exec

comme sus dit utilise plutot test

[kOrt3x]

Envoyé par SpaceFrog

Code :

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 :

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]

Envoyé par Eric2a

Salut,

Dans la partie HTML, il faut remplacer...

Code :

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

par

Code :

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

Partie JS...

Code :

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]

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

[kOrt3x]

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 :

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]

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

Code :

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

[kOrt3x]

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

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.

[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.

[haNjo]

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.