Attacher des évènements

Version imprimable

Salut,
J'ai lu ceci qu'il faut faire ainsi pour attacher des évènements aux éléments d'une page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function addEvent(e, evType, fn) {
  if(e.addEventListener) {
    e.addEventListener(evType, fn, false); // sans capture
    return true;
  } else if (e.attachEvent) {
    var r = e.attachEvent("on"+evType, fn);
    return r;
  } else { return false; }
}
 
addEvent(window, 'load', fonction1);

Avec ce code comment avec ceci?

Code:

1
2
 
<form id="census" onsubmit="return validForm();">

Merci d'avance...

Salut,

Code:

1
2
3
4
5
6
 
function traitement(event) {
   return validForm();
}
var formulaire = document.getElementById('census');
addEvent(formulaire, 'submit', traitement);

Tu peux coder la fonction de manière anonyme directement ainsi:

Code:

1
2
3
4
5
 
var formulaire = document.getElementById('census');
addEvent(formulaire, 'submit', function(event) {
  return validForm(); // ou placer directement ici le code de validation
});

03/10/2010, 18h38
okoweb

marcha,
la fonction est bel et bien attachée mais quand je soumets le formulaire, validForm() est lancée et même si les données du formulaire sont erronées, le formulaire est soumis et ses données sont envoyées vers la page php. Or ce que je veux, c'est soumettre le formulaire si les données sont bonnes et dans le cas contraire rester sur la page du formulaire.
03/10/2010, 18h52
Bovino

Citation:

Envoyé par okoweb

même si les données du formulaire sont erronées, le formulaire est soumis et ses données sont envoyées vers la page php.

Ben dans ce cas, c'est ta fonction de vérification qui est erronée et c'est difficile à déterminer sans le code :mrgreen:
De plus, si l'on se fie à ton premier message, tu semblais demander d'attacher un événement... :?

Citation:

Envoyé par Bovino

Ben dans ce cas, c'est ta fonction de vérification qui est erronée et c'est difficile à déterminer sans le code :mrgreen:

Voici ma fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function validForm(){
    missing_fields = '';
 
    if(document.getElementById("nom").value == ""){
        missing_fields += "\n 'Nom'";
    }
 
    if(missing_fields == ""){ return true;}
    else{
        alert("Les champs suivants doivent etre remplis :" + missing_fields);
        return false;
    }
}

Merci d'avance...

Sorry c'est ma faute, dans le cas de addEventListener
la valeur de retour de la fonciton qui traite l'évènement
n'a pas d'influance.

Il faut utiliser preventDefault pour empêcher l'effet par
défaut de l'évènement (dans ce cas, la soumission du form)

Et il faut traiter le cas IE à part, comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 addEvent(formulaire, 'submit', function(event) { if(!validForm()) { var event = event || window.event; // Pour IE if (event.preventDefault) { // Standard event.preventDefault(); } else { // Pour IE event.returnValue = false; } } });
Attention lors de tes tests. La moindre erreur javascript
fait que le formulaire sera posté.

J'ajouterai que si tu es souvent confronté à ce genre de
problème de compatibilité, regarde pour utiliser une librairie comme JQuery par exemple.

Citation:
Envoyé par marcha
Sorry c'est ma faute, dans le cas de addEventListener
la valeur de retour de la fonciton qui traite l'évènement
n'a pas d'influance.

Il faut utiliser preventDefault pour empêcher l'effet par
défaut de l'évènement (dans ce cas, la soumission du form)

Et il faut traiter le cas IE à part, comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 addEvent(formulaire, 'submit', function(event) { if(!validForm()) { var event = event || window.event; // Pour IE if (event.preventDefault) { // Standard event.preventDefault(); } else { // Pour IE event.returnValue = false; } } });
Attention lors de tes tests. La moindre erreur javascript
fait que le formulaire sera posté.

J'ajouterai que si tu es souvent confronté à ce genre de
problème de compatibilité, regarde pour utiliser une librairie comme JQuery par exemple.
Exact merci...