Récupérer la valeur retournée par l'exécution d'une méthode contenue dans un attribut

**romaintaz** · 04/10/2007, 09h27

Bonjour,

Désolé pour le titre de la discussion, je n'ai pas trouvé mieux

Sur ma page HTML, j'ai un formulaire qui contient des champs (input, ou select) dont certains disposent de l'appel de fonctions Javascript sur l'attribut onblur.
Il s'agit en fait de fonctions de validation (j'en ai une dizaine de différentes).
Par exemple, je vais avoir ceci :

Code :

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

1
2
3
4
 
<input ... onblur="checkRequired(this, ...);"/>
<input ... onblur="checkMinLength(this, ...);"/>
...

Ces méthodes de validation retournent un booléen, indiquant si le champ est valide ou pas.
Ceci fonctionne très bien, à partir du moment où l'utilisateur entre dans tous les champs qui ont des validations.

Ce que je voudrais avoir maintenant, c'est une sorte de validation "globale" quand l'utilisateur clique sur le bouton Submit du formulaire. J'entends par là que dès qu'il clique sur le bouton Submit, une fonction Javascript va exécuter toutes les fonctions de validation, et ne soumettre le formulaire au serveur si et seulement si toutes les validations sont bonnes.
J'ai presque réussi à faire cela avec ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function checkAllFields(button) {
    var form = button.form;
    if (form) {
        for (var x = 0; x &lt; form.elements.length; x++) {
            var field = form.elements[x];
            // J'ai zappé quelques tests ici pour vérifier le type de champ.
            if (field.onblur) {
                field.onblur();
            }
        }
    }
}

Ca fonctionne, mais le souci c'est que si l'un des champs n'est pas valide, le formulaire est quand même soumis.
Pour résoudre cela, il faudrait que ma fonction checkAllFields retourne un booléen qui vaut vrai si tous les champs sont valides, et faux sinon.
Le problème, c'est que je n'arrive pas à récupérer la valeur retournée par l'évaluation de la fonction contenue dans l'attribut onblur de mon champ.

Comment puis-je faire cela ?

**E.Bzz** · 04/10/2007, 09h50

Bonjour,
passe par une variable

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function checkAllFields(button) {
var blnCheckAll = true;
    var form = button.form;
    if (form) {
        for (var x = 0; x < form.elements.length && blnCheckAll; x++) {
            var field = form.elements[x];
            // J'ai zappé quelques tests ici pour vérifier le type de champ.
            if (field.onblur) {
                blnCheckAll = field.onblur();
            }
        }
    }
return blnCheckAll;
}

avec

Code :

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

<form action="..." onsubmit="return checkAllFields(ton_button);">

Le contrôle s'arrêtera à la 1° erreur (sinon c'est plus compliqué : stocker dans un tableau toutes les erreurs rencontrés pour les signaler en fin de controle).
Remarques :
attention aux syntaxe obsolètes
"form" est un mot réservé du langage : très mauvais choix pour un nom de variable

A+

**SpaceFrog** · 04/10/2007, 09h51

la validation sur le blur de chaque champ c'est un peu lourd et peu ergonomique ...

Pourquoi ne fais tu pas une fonction globlae de validation decelenchée sur le onsubmit de ton form

un exemple:

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
<script type='text/javascript'>
function verif(){
var ok=0;
 
ok+=(document.forms['monform'].elements['one'].value.length==0)?1:0;
ok+=(document.forms['monform'].elements['two'].value.length==0)?1:0;
 
if(ok>0){alert('je ne valide pas');}
 
return ok<1;
}
</script>
</head>
 
<body>
<form id="monform" onsubmit='return verif()' action="javascript:alert('je valide')">
<input type='text' id='one' name='one'/>
<input type='text' id='two' name='two'/>
<input type='submit' value='valider' />
</form>
</body>
 
</html>

**romaintaz** · 04/10/2007, 10h02

[quote=E.Bzz;2553573]
passe par une variable

Code :

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

1
2
3
4
...
    blnCheckAll = field.onblur();
...

J'y avais pensé. Le problème c'est que field.onblur() me retourne une valeur undefined, et non le booléen que je recherche !

Envoyé par E.Bzz

attention aux syntaxe obsolètes
"form" est un mot réservé du langage : très mauvais choix pour un nom de variable

Ok, ça c'est changé

**romaintaz** · 04/10/2007, 10h06

Envoyé par SpaceFrog

la validation sur le blur de chaque champ c'est un peu lourd et peu ergonomique ...

Pourquoi ne fais tu pas une fonction globlae de validation decelenchée sur le onsubmit de ton form

Merci pour ta proposition, mais hélas elle ne me va pas.
Je dois en effet proposer une validation à la sortie d'un champ, c'est ce qui m'est demandé

D'où l'obligation du onblur.

Pour information, mes méthodes de validation ne sont pas trop intrusives, c'est-à-dire que si l'utilisateur saisit une valeur invalide, je ne vais pas lui plaquer une alert Javascript devant les yeux. Je vais "juste" mettre le bord du champ en rouge, avec une petite icone, ainsi qu'un message de type tooltip indiquant la nature de l'erreur.
De plus, seule une partie des champs sont soumis à validation, et non tous !

**SpaceFrog** · 04/10/2007, 10h11

oui alors une variable globale qui est modifiée à chaque onblur puis testée dans le onsubmit du form

**E.Bzz** · 04/10/2007, 10h12

Envoyé par romaintaz

J'y avais pensé. Le problème c'est que field.onblur() me retourne une valeur undefined, et non le booléen que je recherche !

Alors il faudrait commencer par corriger ça

Code de la fonction ?

Envoyé par romaintaz

Je dois en effet proposer une validation à la sortie d'un champ, c'est ce qui m'est demandé

D'où l'obligation du onblur.

"Obligation", non !
onchange serait plus judicieux

A+

**E.Bzz** · 04/10/2007, 10h14

Envoyé par SpaceFrog

oui alors une variable globale qui est modifiée à chaque onblur puis testée dans le onsubmit du form

Pas la peine qu'elle soit globale (ça oblige à la gérer), puisque c'est la fonction qui boucle sur les tests ...

A+

**SpaceFrog** · 04/10/2007, 10h16

si elle n'est pas globale je ne vois pas comment elle pourrait être accessible dasn le onsubmit ???

**E.Bzz** · 04/10/2007, 10h17

Envoyé par SpaceFrog

si elle n'est pas globale je ne vois pas comment elle pourrait être accessible dasn le onsubmit ???

Ben ... classique : cf. #2

A+

**SpaceFrog** · 04/10/2007, 10h27

Ok Ebzz mais seulement dans le cas d'une focntion générique pour la vérfication de tous les éléments à renseigner sur le form...
Quid si en focntion du type d'element input; check, radio, select, tu as une fonction de verification dédiée ...

**romaintaz** · 04/10/2007, 10h27

Envoyé par E.Bzz

Alors il faudrait commencer par corriger ça

Code de la fonction ?

"Obligation", non !
onchange serait plus judicieux

A+

Le onchange serait plus judicieux, sans doute, mais voici un cas qui ne sera pas pris en compte par le onchange :
J'ai un champ dont la fonction de validation est checkRequired. Cette validation échoue si le champ est vide. Admettons que l'utilisateur, par l'appui de TAB, passe par ce champ, mais n'y remplit rien. Il appuie à nouveau sur TAB, quitte donc ce champ. onchange n'est pas appelé (le champ n'a pas été modifié), mais onblur si. Maintenant, pour mes autres types de validations, je pourrais en effet utiliser le onchange pour toutes les autres validations, et garder le onblur pour mon checkRequired.

Sinon, tu veux le code de quelle fonction ? La fonction checkRequired par exemple ?
La voici :

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
31
 
function checkRequired(field, message, icon) {
    var isValid = true;
    if (field == null || field.disabled) {
        return true;
    }
    if (field.type == 'text' ||
        field.type == 'textarea' ||
        field.type == 'file' ||
        field.type == 'select-one' ||
        field.type == 'radio' ||
        field.type == 'password') {
        var value = '';
          // get field's value
        if (field.type == "select-one") {
            var si = field.selectedIndex;
            if (si >= 0) {
                value = field.options[si].value;
            }
          } else {
            value = field.value;
          }
        if (trim(value).length == 0) {
        isValid = false;
        }
    }
    if (!isValid) {
        displayAlarm(field, message, icon);
    }
    return isValid;
}

La fonction displayAlarm ne fait qu'afficher les "alertes" à l'utilisateur, et ne retourne rien.

**E.Bzz** · 04/10/2007, 10h29

Envoyé par romaintaz

Sinon, tu veux le code de quelle fonction ?

Celle qui, sur le onblur, ne te retourne pas le booléen souhaité ...

A+

**E.Bzz** · 04/10/2007, 10h32

Envoyé par SpaceFrog

Quid si en focntion du type d'element input; check, radio, select, tu as une fonction de verification dédiée ...

Dans la mesure où c'est celle appelée sur le onblur de l'élément qui est rappelée (pas vérifié la syntaxe, par contre, mais ça semble fonctionner), on peut la considérer comme "générique", même si ce sont des fonctions utilisateur différentes qui s'éxécutent au final, non ?

A+

**romaintaz** · 04/10/2007, 10h36

Dans ma page HTML, j'ai mon input :

Code :

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

1
2
 
<input ... onblur="checkRequired(this,  'This field is required.', 'images/warning.gif');" onclick="hideAlarm(this);" />

Bon, j'ai eu l'illumination en écrivant mon explication. Il me suffit de faire :

Code :

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

1
2
 
<input ... onblur="return checkRequired(this,  'This field is required.', 'images/warning.gif');" onclick="hideAlarm(this);" />

Avec ça, ça marche !

**romaintaz** · 04/10/2007, 10h37

Envoyé par E.Bzz

Celle qui, sur le onblur, ne te retourne pas le booléen souhaité ...

A+

Merci pour avoir préciser ta pensée, c'est comme ça que j'ai trouvé ma solution!
Merci à tous les deux pour votre aide.

Récupérer la valeur retournée par l'exécution d'une méthode contenue dans un attribut

JavaScript

Discussions similaires

Partager

Partager