Empecher la validation d'un formulaire via la méthode focus() d'un champs

**Mouns007** · 11/10/2010, 18h08

Bonjour,

je voudrais savoir s'il est possible d'empêcher le clique sur un lien via la méthode focus d'un champs.

Je m'explique. J'ai un champs de type date. J'ai un contrôle javascript qui verifie le format de la date et qui remet le focus sur le champs tant que la date saisie n'est pas au bon format.
Hors malgré ce contrôle, je n'arrive pas à empêcher le clique sur un lien.
Est ce que c'est le javascript n'est pas suffisamment rapide pour empêcher le clique sur le lien ou est ce que je m'y prend mal?

PS: je n'ai pas la possibilité de faire un contrôle coté serveur pour des raisons techniques.

**javatwister** · 11/10/2010, 18h54

au pire, ne fais apparaître ton lien que quand le champ est valide;

**Mouns007** · 11/10/2010, 19h05

Envoyé par javatwister

au pire, ne fais apparaître ton lien que quand le champ est valide;

Si ca n'avait été que moi je l'aurais surement fait.

Mais ce n'est pas possible.

Mon formulaire fait partie d'un wizzard. Donc d'un formulaire sur plusieurs pages.
Pour aller à la page suivante il y a un controle.
Mais ce controle ne peut pas etre utilisé pour le retour arriere (pour des raisons politiques).
La seul possibilité qu'on me laisser c'est d'empêcher le focus de quitter le champs si celui-ci n'est pas valide. Est ce qu'il y a un moyen de le faire?

**RomainVALERI** · 11/10/2010, 22h21

Ce n'est pas dans la partie "onfocus" du champ date que tu dois placer un controle ici : plutot sur le "onclick" du lien à activer/désactiver. Il faut conditionner le retour de la fonction sur la validité des données de ton champ date. Pour décomposer les choses en deux étapes, tu peux faire ça :

1) dans le "onchange" du champ date, tu as un controle qui positionne une variable globale avec un booléen. Exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
  ...
  ...
  <script type="text/javascript">
    var okDate = false;
    document.body.onload = function () {
      document.getElementById("idDuChampDate").onchange = function testDate() {
        okDate = (this.value.indexOf("2010") > -1);
        // exemple si tu ne voulais que les dates contenant cette chaine,
        //mais c'est a adapter a ta logique de validation bien entendu
      };
    };
  </script>
</head>

2) dans le "onclick" du lien tu testes la valeur de ce "flag" pour autoriser l'activation du lien. Ca consisterait à ajouter dans l'exemple précédent :

Code html :

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
<head>
  ...
  ...
  <script type="text/javascript">
    var okDate = false;
    document.body.onload = function () {
      document.getElementById("idDuChampDate").onchange = function testDate() {
        okDate = (this.value.indexOf("2010") > -1);
        // exemple si tu ne voulais que les dates contenant cette chaine,
        //mais c'est a adapter a ta logique de validation bien entendu
      };
        
      document.getElementById("idDuLien").onclick = function () {return okDate;};

    };
  </script>
</head>

<rengaine type="vieille">Mais quoi qu'il en soit, rappelle-toi qu'un controle JS n'aura d'effet que sur les visiteurs l'ayant laissé activé. C'est une majorité des internautes, mais pas la totalité ^^ (donc ce n'est pas une sécurité mais un supplément d'ergonomie)</rengaine>

(pour ne pas compliquer l'exemple j'ai tout balancé en vrac dans une balise script du head et c'est mal

Pour bien faire il aurait fallu faire dans le head un link vers un JS externe ^^ en plus, ce code écrasera d'éventuelles autres fonctions préexistantes pour ces événements, donc il faudrait plutot faire de l'addEventListener/attachEvent... mais bref elles vont se taire les p'tites voix ?

)

**Mouns007** · 12/10/2010, 13h54

bon c'est ce que je voulais savoir. Pour controler le champs je vais mettre un controle sur le bonton qui permet de changer de page.

Merci à tous pour votre aide.

Empecher la validation d'un formulaire via la méthode focus() d'un champs

JavaScript

Discussions similaires

Partager

Partager