form de vérification de pseudo avec ajax
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.
