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

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:

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:

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 < 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 ?

Bonjour,
passe par une variable
Code:

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:

<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+

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:

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>

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

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 !

Citation:

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é ;)

Citation:

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 !

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

Citation:

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 :mrgreen:
Code de la fonction ?

Citation:

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+

Citation:

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+

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

Citation:

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+

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

Citation:

Envoyé par E.Bzz

Alors il faudrait commencer par corriger ça :mrgreen:
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:

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.

Citation:

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+

Citation:

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+

Dans ma page HTML, j'ai mon input :
Code:

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:

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

Citation:

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