Activer le bouton submit en fonction des input texte

Version imprimable

Bonjour à tous,

je me suis mis dernièrement au JavaScript à l'approche de mes PTI de BTS ;)
j'essaie désespérément de réaliser un contrôle de saisie sur un formulaire.

Après avoir correctemment afficher des images au coin de chaque ligne du formulaire pour indiquer si la valeur du champ est correcte ou non, je voudrais pouvoir activer ou désactiver le bouton submit en fonction des valeurs rentrées.

C'est-à-dire que le bouton submit ne soit pas actif tant que l'un des 4 premiers champ soit rouge! :p

je vous envoie une petit screenshot pour vous montrer à quoi ça ressemble :)

http://www.tooPix.eu/userfiles/mini/...bda77a8453.png

donc là le bouton submit est préalablement désactivé.

Pour le moment le code se présente de cette façon :

Fonction qui vérifie si la syntaxe de l'email est correcte :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function verifEmail() { if (document.getElementById('email').value.indexOf('@') == -1) { document.getElementById('emailenter').src = 'html/images/register-error.gif'; document.getElementById('emailerror').innerHTML = '<u>Erreur</u> : <p>Cette adresse mail n\'est pas valide.</p>'; return false; } else { document.getElementById('emailenter').src = 'html/images/register-ok.gif'; document.getElementById('emailerror').innerHTML = ''; } }
Fonction qui réactivera le bouton submit :
Code:

1 2 3 4 5 function verifSubmit() { document.getElementById('inscrire').src = "html/images/submit-btn.png"; document.getElementById('inscrire').disabled=false; }
Donc le problème est que je n'arrive pas à voir comment relier ces deux fonctions, sachant que verifSubmit doit être actif qu'une fois que tous les champs seront correctement complété. Et vice-versa, le bouton doit redevenir inactif si des erreurs sont transmises.

Voilà je vous serais une nouvelle fois grandement reconnaissant si vous arrivez à m'aider sur le sujet ^^

merci bien, bonne journée ;)

Hello,

Dans ton onblur (perte de focus) des champs conditionnels, appelle ta fonction qui vérifie que les champs sont valides ou pas, et enable/disable le bouton submit dans un cas ou dans l'autre :)

Par exemple en jQuery :
Code:

1 2 3 4 5 6 7 8 $(document).ready(function() { $('#myConditionalField1, #myConditionalField2, #myConditionalField3').blur(function() { maFonctionQuiVérifieLesChampsEtModifieLeBoutonSubmit(paramsEventuels); }); });
Ne pas oublier de vérifier les champs côté PHP pour la sécurité (le côté JS c'est pour le confort)

Bonne journée !

Ma version des faits, je te laisse l'étudier :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>activer un bouton si le formulaire est correctement saisi</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" action="p.html" method="post">
    <p><label for="nom">nom</label><input id="nom" name="nom" type="text" /></p>
    <p><label for="prenom">prenom</label><input id="prenom" name="prenom" type="text" /></p>
    <p><label for="email">email</label><input id="email" name="email" type="text" /></p>
    <button id="b" type="submit" value="v" disabled="disabled">valider</button>
  </form>
  <script type="text/javascript">
  <!--
  var FC = {
    Evenement: {
      ajouter: function(elm, evt, fn) {
        if (document.addEventListener) {
          if (elm.nodeType===1 || elm.nodeType===9) {
            elm.addEventListener(evt, function(e) {
              if (!fn(e)) { e.preventDefault(); }
            }, false);
          } else {
            for (var i = 0, imax = elm.length; i < imax; i++) {
              elm[i].addEventListener(evt, function(e) {
                 if (!fn(e)) { e.preventDefault(); }
              }, false);
            }
          }
        } else if (document.attachEvent) {
          if (elm.nodeType===1 || elm.nodeType===9) {
            return elm.attachEvent("on" + evt, fn);
          } else {
            for (var i = 0, imax = elm.length; i < imax; i++) {
              elm[i].attachEvent("on" + evt, function(e) {
                if (!fn(e)) { e.returnValue = false; }
              });
            }
          }
        }
      }
    },
    Validation: {
      Flag: true,
      estSaisi: function(elm) {
        if(elm.value==="") { FC.Validation.Flag=false; }
      },
      estEmail: function(elm) {
        var p = /\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/ig;
        if(elm.value.match(p)) { FC.Validation.Flag=false; }
      }
    }
  };
 
  FC.Evenement.ajouter(document.getElementsByTagName("input"), "keyup", function(e) {
    var elm = e.target || event.srcElement;
    if(elm.type==="text") {
      if(elm.id==="email") { FC.Validation.estEmail(elm); } 
      else { FC.Validation.estSaisi(elm); }
      if(FC.Validation.Flag) { document.getElementById("b").disabled=false; }
    }
  });
  //-->
  </script>
</body>
</html>

L'idée est d'avoir une variable globale. Par contre, plutôt que le onblur, il vaut mieux tester le onkeyup, ce qui active le bouton tout en étant dans le dernier champs de saisie.

11/06/2009, 17h29
miniBob

ok merci à tous les deux je teste ça et je fais le rapport :p
11/06/2009, 18h01
Lideln75

Le problème du onkeyup, c'est que déjà ton code est appelé quarante-douze fois, et qu'ensuite le malin qui fait clic-droit -> coller, ben ton code ne marche plus.

Après... Par souci d'homogénéité, le mieux est d'enable/disable le bouton dans le même événement que tu vérifies tes champs et que tu affiches la ptite image à droite.
Si tu vérifies dans le onkeypress (ou onkeyup) et que c'est là que tu affiches ton image, alors éventuellement il est mieux de faire comme propose franculor.

Par contre, si ton code est exécuté dans le onblur (quand ton champ perd le focus, c'est à dire que la saisie est terminée), alors il vaut mieux mettre dans le onblur.

En gros : tout au même endroit, c'est plus propre.

Par contre je privilégie le onblur pour les deux raisons citées en début de post :)
11/06/2009, 18h42
franculo_caoulene

Dans ce cas, le problème du onblur pour moi est que quand tu saisis le dernier champ, tu es obligé de cliquer ailleurs sur la page ou de faire une tabulation pour valider le champ et activer le bouton. C'est une action parasite qui peut-être troublante.

Méfie-toi de tes gestes de développeur qui testent tes propres applications comme tu souhaites les tester toi (j'insiste un peu dans la phrases, non?). Demande à quelqu'un d'autre de tester l'interface, sans rien lui dire et demande lui son avis.

On peut modifier mon code de façon à tester tout le formulaire en bouclant et en ajoutant un ou des booléens, pour savoir si un champ a déjà été testé.
11/06/2009, 19h07
miniBob

J'ai géré le problème avec des variables booléennes globales, ça marche à peu près je vous envoie le lien pour tester, j'ai bien évidemment désactivé le formulaire d'envoi :

http://www.toopix.eu/inscription.html
12/06/2009, 09h53
franculo_caoulene

Poste ton code plutôt, ça restera stocké sur le forum et apparaîtra dans de futures recherches. Tandis que ton site peut changer.