Skip to content

Commit 67d8e01

Browse files
loicfreringloicfrering
committed
Syntax highlighting pour "Les subtilités des formulaires de login en JS".
1 parent a1a7334 commit 67d8e01

File tree

1 file changed

+62
-52
lines changed

1 file changed

+62
-52
lines changed

‎_posts/2011-10-19-subtilites-du-login.markdown‎

Lines changed: 62 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Hélas non... Les formulaires de login (un champs <tt>text</tt> + un champ <tt>p
2222

2323
C'est là le premier problème :
2424
>**Le formulaire doit être présent dans le DOM au chargement de la page.**
25-
25+
2626
Oui, vous avez compris : si vous construisez votre formulaire directement en JS, ou si vous utilisez un template que vous accrochez une fois la page chargée, votre formulaire sera ignoré par certains navigateurs.
2727

2828
L'astuce que j'utilise consiste à:
@@ -33,18 +33,21 @@ L'astuce que j'utilise consiste à:
3333

3434
**index.html**
3535

36-
<div id="loginStock" style="display:none">
37-
<form id="formLogin">
38-
<input type="text" name="username"/>
39-
<input type="password" name="password"/>
40-
</form>
41-
</div>
36+
{% highlight html %}
37+
<div id="loginStock" style="display:none">
38+
<form id="formLogin">
39+
<input type="text" name="username"/>
40+
<input type="password" name="password"/>
41+
</form>
42+
</div>
43+
{% endhighlight %}
4244

4345
**login.js**
4446

45-
$('.loginContainer', this.element).append($('#loginStock > *'));
46-
47-
47+
{% highlight js %}
48+
$('.loginContainer', this.element).append($('#loginStock > *'));
49+
{% endhighlight %}
50+
4851
## Dois-je mettre un champ de type <tt>submit</tt> ?
4952

5053
S'il n'y a que les champs de type <tt>text</tt> et <tt>password</tt>, le navigateur ne retiendra pas le mot de passe.
@@ -55,25 +58,28 @@ Même s'il est masqué (le bouton n'est pas encore bien skinnable, même en CSS
5558

5659
**index.html**
5760

58-
<div id="loginStock" style="display:none">
59-
<form id="formLogin">
60-
<input type="text" name="username"/>
61-
<input type="password" name="password"/>
62-
<input type="submit" style="display:none"/>
63-
</form>
64-
<a href="#" class="submit"></a>
65-
</div>
66-
61+
{% highlight html %}
62+
<div id="loginStock" style="display:none">
63+
<form id="formLogin">
64+
<input type="text" name="username"/>
65+
<input type="password" name="password"/>
66+
<input type="submit" style="display:none"/>
67+
</form>
68+
<a href="#" class="submit"></a>
69+
</div>
70+
{% endhighlight %}
71+
6772
**login.js**
6873

69-
$('.loginContainer .submit').click(function(event){
70-
// Déclenche la soumission du formulaire.
71-
$('#formLogin').submit();
72-
// Annule la propagation du Click sur le lien, pas de la soumission du formulaire !
73-
return false;
74-
}).button({label:'log in !'});
74+
{% highlight js %}
75+
$('.loginContainer .submit').click(function(event){
76+
// Déclenche la soumission du formulaire.
77+
$('#formLogin').submit();
78+
// Annule la propagation du Click sur le lien, pas de la soumission du formulaire !
79+
return false;
80+
}).button({label:'log in !'});
81+
{% endhighlight %}
7582

76-
7783
## Doit-on stopper la propagation de l'événement <tt>submit</tt> ?
7884

7985
Le problème se pose si vous ne réalisez pas un "vrai" POST lorsque l'utilisateur déclenche la soumission du formulaire.
@@ -94,23 +100,26 @@ Donc généralement, mon service web propose une API POST qui ne fait rien et re
94100

95101
**index.html**
96102

97-
<div id="loginStock" style="display:none" method="post" action="/api/login/noop" target="postFrame">
98-
<form id="formLogin">
99-
<input autofocus="autofocus" type="text" name="username"/>
100-
<input autocomplete="on" type="password" name="password"/>
101-
<input type="submit" style="display:none"/>
102-
</form>
103-
<a href="#" class="submit"></a>
104-
</div>
105-
<iframe name="postFrame" class="hidden"></iframe>
106-
103+
{% highlight html %}
104+
<div id="loginStock" style="display:none" method="post" action="/api/login/noop" target="postFrame">
105+
<form id="formLogin">
106+
<input autofocus="autofocus" type="text" name="username"/>
107+
<input autocomplete="on" type="password" name="password"/>
108+
<input type="submit" style="display:none"/>
109+
</form>
110+
<a href="#" class="submit"></a>
111+
</div>
112+
<iframe name="postFrame" class="hidden"></iframe>
113+
{% endhighlight %}
114+
107115
**login.js**
108116

109-
$('#formLogin').submit(function(event){
110-
// Ici mon appel ajax, et surtout, ne pas renvoyer false ni invoquer event.stopPropagation().
111-
});
112-
113-
117+
{% highlight js %}
118+
$('#formLogin').submit(function(event){
119+
// Ici mon appel ajax, et surtout, ne pas renvoyer false ni invoquer event.stopPropagation().
120+
});
121+
{% endhighlight %}
122+
114123
### Une petite astuce : lorsque l'authentification échoue.
115124

116125
A partir du moment où l'événement <tt>submit</tt> est propagé, et qu'une réponse HTTP est reçue, le navigateur conservera bien le mot de passe et le login.
@@ -130,16 +139,17 @@ Personnellement, je lui affecte une taille de zéro. Vous pouvez aussi le positi
130139

131140
**index.html**
132141

133-
<div id="loginStock" style="display:none" method="post" action="/api/login/noop" target="postFrame">
134-
<form id="formLogin">
135-
<input autofocus="autofocus" type="text" name="username"/>
136-
<input autocomplete="on" type="password" name="password"/>
137-
<input type="submit" style="width:0; height:0; border:0; padding:0"/>
138-
</form>
139-
<a href="#" class="submit"></a>
140-
</div>
141-
142-
142+
{% highlight html %}
143+
<div id="loginStock" style="display:none" method="post" action="/api/login/noop" target="postFrame">
144+
<form id="formLogin">
145+
<input autofocus="autofocus" type="text" name="username"/>
146+
<input autocomplete="on" type="password" name="password"/>
147+
<input type="submit" style="width:0; height:0; border:0; padding:0"/>
148+
</form>
149+
<a href="#" class="submit"></a>
150+
</div>
151+
{% endhighlight %}
152+
143153
## Conclusion
144154

145155
Vous voyez ? quand je vous disais que ce n'était pas trivial...
@@ -148,4 +158,4 @@ Mais maintenant, vous avez toutes les clefs pour faire des formulaires qui explo
148158

149159
Espérons que dans un futur proche, les navigateurs harmonisent un peu plus leur fonctionnement, de manière à éviter tout ces tricks...
150160

151-
Damien.
161+
Damien.

0 commit comments

Comments
 (0)