script js de validation de formulaire d'inscription

Version imprimable

Bonjour,

J'ai un script de validation du formulaire d'inscription qui fonctionne à merveille sur FireFox, ce n'est pas le cas malheureusement sur IE
J'ai fais le tour du forum pour chercher des problèmes similaires , j'ai vu qu'un simple ajout de value règle le problème, ce n'est pas mon cas puisque j'ai déjà cette information dans mon formulaire.

Mon formulaire

Code:

1
2
3
4
5
 
print "<form method=\"$method\" action=\"$action\" name=\"formSaisie\" onsubmit=\" return valider(this)\" >";
print "<input type=\"hidden\" name=\"rempli\" value=\"1\">";
Nom d’usager désiré: <input type="text" id="usager" name="usager" size="30" value="$usager" maxlength="30"/><br/>
Mot de passe désiré: <input class="align3" id="pass" name="pass" type="password" value="$pass" size="30" maxlength="30"/><br/><br/>

Mon script

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 valider(e)
{
 
    var champUsager = document.getElementById('usager');
    var champPass = document.getElementById('pass');
 
   // Pour assurer la compatibilité 
    var eventCapture = false;
    var event = 'submit'; // ex. mouseover, blur, click
    if (window.addEventListener) { // Standard
        obj.addEventListener(event, test( champUsager, champPass ), eventCapture);
        alert("Je suis sur std");
    }
    else if(window.attachEvent) { // IE
        obj.attachEvent('on' + event, test(champUsager, champPass));
        alert("Je suis IE");
    }
    else {
        throw "DOM Level 2 events not supported";
    }
 
}
function test(champUsager, champPass){
 
    // Vérifier que tous les champs sont remplis
    if((champUsager.value != "") || (champPass.value != ""))
    {
 
        var prenomOK = validerPrenom(champPrenom);                
        var nomOK = validerNom(champNom);    
        var courrielOK = validerCourriel(champCourriel);
        var licenceOK = validerAccordLisence(champLicence);
        var usagerOk = validerUsager(champUsager);    
 
        if (prenomOK  && nomOK && courrielOK && licenceOK && usagerOk)
        {
            return true;
        }
        else 
        {    
            if (e && e.preventDefault)
                e.preventDefault();
            return false;    
        }
    }
    else
    {
        alert('Remplissez le fomulaire S.V.P');
    }
 
}

J'ai ajouté un bout de code que j'ai trouvé pour enregistrer l'événement sumbit qui déclenche la validation ... ça ne donne pas grande chose puisque les 2 alert n'affichent rien

Que devrais-je faire pour assurer la compatibilité entre IE et fireFox dans mon cas ?

Merci infiniment :zoubi:

02/12/2009, 08h25
madevilts

Ca me parait très compliqué tout ça.

Quel est le but recherché ?
02/12/2009, 10h03
E.Bzz

Bonjour,
le principal problème semble être que ta fonction valider() ne fait pas de return ...

Elle doit renvoyer true si la validation est OK et false sinon ...
(c'est ce true ou false qui est ensuite renvoyé par le onsubmit et bloque ou non l'envoi du form)

A+

Citation:

Envoyé par madevilts

Ca me parait très compliqué tout ça.

Quel est le but recherché ?

Je veux faire en sorte que mon script de validation de formulaire fonctionne sous IE

Merci bzz pour la réponse. Ma fonction valider retourne true ou false dépendament du résultat de test, je viens d'ajouter un return false dans le if qui vérifie si mes champs sont vide ça ne change pas grande chose

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
52
function valider(e)
{
 
    var champUsager = document.getElementById('usager');
    var champPass = document.getElementById('pass');
 
   // Pour assurer la compatibilité 
    var eventCapture = false;
    var event = 'submit'; // ex. mouseover, blur, click
    if (window.addEventListener) { // Standard
        obj.addEventListener(event, test( champUsager, champPass ), eventCapture);
        alert("Je suis sur std");
    }
    else if(window.attachEvent) { // IE
        obj.attachEvent('on' + event, test(champUsager, champPass));
        alert("Je suis IE");
    }
    else {
        throw "DOM Level 2 events not supported";
    }
 
}
function test(champUsager, champPass){
 
    // Vérifier que tous les champs sont remplis
    if((champUsager.value != "") || (champPass.value != ""))
    {
 
        var prenomOK = validerPrenom(champPrenom);                
        var nomOK = validerNom(champNom);    
        var courrielOK = validerCourriel(champCourriel);
        var licenceOK = validerAccordLisence(champLicence);
        var usagerOk = validerUsager(champUsager);    
 
        if (prenomOK  && nomOK && courrielOK && licenceOK && usagerOk)
        {
            return true;
        }
        else 
        {    
            if (e && e.preventDefault)
                e.preventDefault();
            return false;    
        }
    }
    else
    {
        alert('Remplissez le fomulaire S.V.P');
        return false;
    }
 
}

Un aperçu de la fonction qui test si le champ user est valide

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function validerUsager(champUsager){
	var expressionReguliere = /^[a-zA-Z\d]{5,30}$/;
 
 
	if(!expressionReguliere.test(champUsager.value))
	{
      alert('Veuillez entrer un nom d\'usager valide ).');
	  champUsager.style.backgroundColor = "#fba";
	  return false;
	}
	else
	{
		champUsager.style.backgroundColor = "";
		return true;
	}
 
}

Ya til un code particulier à ajouter pour assurer la compatibilité ?

ça l'air que le problème vient du addEventListner comment l'utiliser ? que dois-je lui passer en paramètre ? c'est l'argument listner qui m'intrigue dois je lui passer la fonction qui valide le champ prenom ?

J'ai le code suivant

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
 
function valider(e)
{
    var champPrenom = document.getElementById('prenom');
 
    alert("Je suis dans valider");
 
    if(champPrenom.value != "")
    {
        alert("Les champs ne sont pas vide");
 
        var eventCapture = false;
        var event = 'submit';
        if (window.addEventListener) 
       { 
            champPrenom.addEventListener(event, alert("toto"), eventCapture);
            alert("Je suis sur std");
        }
        else if(window.attachEvent) 
        { // IE
             champPrenom.attachEvent('on' + event, function()       {alert("addEventListener de IE !"); });
            alert("Je suis IE");
        }
        else {
            throw "DOM Level 2 events not supported";
        }
 
        var prenomOK = validerPrenom(champPrenom);                
 
        if (prenomOK)
        {    
            alert("Le prenom est OK");
            return true;
        }
        else 
        {    
            if (e && e.preventDefault){
                e.preventDefault();
            }
            alert("le prenom n'est pas ok");
            return false;    
        }
    }
    else
    {
        alert('Veuillez remplir le champ prenom');
        return false;
    }
}

En mettant un alert dans la fonction du listner mes popup s'affichent mais l'inscription ne fonctionne pas :arf:

PS: J'ai testé avec
champPrenom.attachEvent('on' + event, validerPrenom, eventCapture);
Ça ne fonctionne pas non plus