form de vérification de pseudo avec ajax

[kikou732]

Bonsoir

Aujourd'hui j'adapte le code d'un tp trouvé sur un autre site. Et je rencontre un problème . Il ne produit pas le fonctionnement que je veux.
A savoir c'est un formulaire d'activation de son compte a partir d'une clé recu par email.

Voici le code html:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="actif.php" method="post" id="myForm" >
 
            <?php if ($_GET['erreur'] == 1) { ?><strong>Vous vous etes trompée de pseudo ou de code d'activation, recommencez</strong><?php } ?>
      <label class="form_col" for="login">Entrez votre pseudo</label>
      <input name="login" id="login" type="text"  />
      <span class="tooltip" id="login1"></span> 
      <br/><br/>
 
      <label class="form_col" for="codeActivate">Nom :</label>
      <input name="codeActivate" id="codeActivate" type="text"  />
      <span class="tooltip" id="codeActivate1">Un nom ne peut pas faire moins de 2 caractères </span>
      <br/><br/>
 
            <input type="submit" value="M'inscrire" /> <input type="reset" value="Réinitialiser le formulaire" />
 
    </form>

Le code javascript:

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<script type="text/javascript">
 
 
// Fonction de désactivation de l'affichage des "tooltips"
 
function deactivateTooltips() {
 
    var spans = document.getElementsByTagName('span'),
    spansLength = spans.length;
 
    for (var i = 0 ; i < spansLength ; i++) {
        if (spans[i].className == 'tooltip') {
            spans[i].style.display = 'none';
        }
    }
 
}
 
 
// La fonction ci-dessous permet de récupérer la "tooltip" qui correspond à notre input
 
function getTooltip(element) {
 
    while (element = element.nextSibling) {
        if (element.className === 'tooltip') {
            return element;
        }
    }
 
    return false;
 
}
 
 
// Fonctions de vérification du formulaire, elles renvoient "true" si tout est ok
 
var check = {}; // On met toutes nos fonctions dans un objet littéral
 
 
 
check['login'] = function() {
 
    var login = document.getElementById('login'),
        tooltipStyle = getTooltip(login).style;
 
    var retour = true;
 
 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://poliboolold.fr/membres/ajax_pseudo.php?pseudo='+login.value , false);
  xhr.send(null);
 
 
 
 
    if (xhr.responseText == "warning") {
 
    login.className = 'correct';
    tooltipStyle.display = 'none';
 
  } else {
 
    login.className = 'incorrect';
    document.getElementById('login1').innerHTML = 'Ce pseudo n'existe pas';
    tooltipStyle.display = 'inline-block';
    retour = false;
  }
 
 
 
 
return retour;
};
 
 
// Mise en place des événements
 
(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
 
    var myForm = document.getElementById('myForm'),
        inputs = document.getElementsByTagName('input'),
        inputsLength = inputs.length;
 
    for (var i = 0 ; i < inputsLength ; i++) {
        if (inputs[i].type == 'text' || inputs[i].type == 'password') {
 
            inputs[i].onkeyup = function() {
                check[this.id](this.id); // "this" représente l'input actuellement modifié
            };
 
        }
    }
 
    myForm.onsubmit = function() {
 
        var result = true;
 
        for (var i in check) {
            result = check[i](i) && result;
        }
 
        if (result) {
                        myForm.submit();
        }
 
        return false;
 
    };
 
    myForm.onreset = function() {
 
        for (var i = 0 ; i < inputsLength ; i++) {
            if (inputs[i].type == 'text' || inputs[i].type == 'password') {
                inputs[i].className = '';
            }
        }
 
        /*deactivateTooltips();*/
 
    };
 
})();
 
 
// Maintenant que tout est initialisé, on peut désactiver les "tooltips"
 
deactivateTooltips();
 
</script>

Le code php de la page ajax_pseudo.php:

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
<?php
 
try
{
$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
   			 $bdd = new PDO('mysql:host=;dbname=', '', '', $pdo_options);
 
		$req= $bdd->prepare('SELECT id FROM membres WHERE pseudo=:pseudo');
		$req->execute(array('pseudo'=> $_GET['pseudo']));
		$resultat= $req->fetch();
 
if($resultat)
{
echo utf8_decode("warning");
}
else
{
echo utf8_decode("gut");
}
 
}
 
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
 
 
?>

Vous pouvez testez le fonctionnement de la page ici
Comment remedier a ce comportement ?

Merci d'avance

ps: J'ai regardé la consoles d'erreur sous mozilla firefox: résultat aucune erreur.

+:Ben si tu compare mon formulaire a celui du tuto tu voit bien les différenes . Sur le mien quand tu clique sur le bouton "m'inscrire " , la page se recharge et revient a 0 . Alors que je veut le meme comportement que celui de l'autre formulaire.

[Torgar]

Corrige déjà ça (antislash) et redis nous :

Code :

document.getElementById('login1').innerHTML = 'Ce pseudo n\'existe pas';

[SpaceFrog]

Quel interet de faire un ajax si tu soumets le form ?

[NoSmoking]

Bonjour,

Envoyé par poliboolold

+:Ben si tu compare mon formulaire a celui du tuto tu voit bien les différenes . Sur le mien quand tu clique sur le bouton "m'inscrire " , la page se recharge et revient a 0 . Alors que je veut le meme comportement que celui de l'autre formulaire.

tu n'as visiblement pas lu la réponse faite sur ce post