Bon, je suis toujours avec mon formulaire...
La page test : http://www.yuimen.com/lothindil/inscription-test.php
(pas sur que ça vous aide, le code source est un joyeux boxon)
Mon concept c'est de faire un formulaire dynamique comprenant 5 étapes distinctes et visuelles. Pour la première étape (création du compte), l'utilisateur doit remplir un morceau du formulaire comprenant plusieurs champs. Jusque là, pas trop de problème.
Une fois cela fait, il clique sur 'étape suivante' qui affiche la première étape de la création du personnage. Ce n'est pas un submit en tant que tel (pas de changements de page), juste une pré-validation javascript et ajax.
Mon problème est assez simple : l'évènement "click" marche très bien la première fois. Mais quand l'utilisateur fait une erreur, j'affiche les erreurs sans toucher au formulaire (ça marche aussi)... à part que l'évènement "click" ne marche plus, ce qui fait que l'utilisateur ne peut pas re-valider son étape du formulaire.
Code HTML de cette partie-là :
Mon code Jquery (pour ce bout-là) :
Modifié par Lothindil (14 May 2012 - 15:57)
La page test : http://www.yuimen.com/lothindil/inscription-test.php
(pas sur que ça vous aide, le code source est un joyeux boxon)
Mon concept c'est de faire un formulaire dynamique comprenant 5 étapes distinctes et visuelles. Pour la première étape (création du compte), l'utilisateur doit remplir un morceau du formulaire comprenant plusieurs champs. Jusque là, pas trop de problème.
Une fois cela fait, il clique sur 'étape suivante' qui affiche la première étape de la création du personnage. Ce n'est pas un submit en tant que tel (pas de changements de page), juste une pré-validation javascript et ajax.
Mon problème est assez simple : l'évènement "click" marche très bien la première fois. Mais quand l'utilisateur fait une erreur, j'affiche les erreurs sans toucher au formulaire (ça marche aussi)... à part que l'évènement "click" ne marche plus, ce qui fait que l'utilisateur ne peut pas re-valider son étape du formulaire.
Code HTML de cette partie-là :
<div id='formulaire1' style='display:block'>
<span id='err_login'></span>
<span id='err_pass'></span>
<span id='err_mail'></span>
<span id='err_parrain'></span>
<p><label for='login'>Login : </label><input class='champtxt' type='text' id='login' /></p>
<p><label for='password'>Mot de passe : </label><input class='champtxt' type='password' id='password' /></p>
<p><label for='pass2'>Retaper votre mot de passe : </label><input class='champtxt' type='password' id='pass2' /></p>
<p><label for='email'>E-mail : </label><input class='champtxt' type='text' id='email' /></p>
<p><label for='parrain'>Parrain : </label><input class='champtxt' type='text' id='parrain' value=''/></p>
<p id='valid1'>Aller à l'étape suivante ! <img src='images/flecheEst.gif' title='Etape suivante' alt='Etape suivante' /></p>
</div>Mon code Jquery (pour ce bout-là) :
$('#valid1').click
(
function ()
{
var erreur=0;
var login=$('#login').val();
var pass=$('#password').val();
var pass2=$('#pass2').val();
var email=$('#email').val();
var alphanum = new RegExp(/([^A-Za-z0-9_ \-])/);
if(login=='')
{
erreur=1;
$("#err_login").html("<p>Vous devez inscrire un login.</p>");
}
else if (alphanum.test (login))
{
erreur=1;
$("#err_login").html("<p>Vous ne pouvez utiliser que des caractères alpha-numériques, des -, des espaces et des - dans le login.</p>");
}
if(pass=='')
{
erreur=1;
$("#err_pass").html("<p>Vous devez inscrire un mot de passe.</p>");
}
else if(pass2=='')
{
erreur=1;
$('#err_pass').html("<p>Vous devez ré-inscrire votre mot de passe.</p>");
}
else if($pass2!=pass)
{
erreur=1;
$('#err_pass').html("<p>Les deux mots de pass doivent être identique (faite attention aux majuscules)</p>");
}
if(email=='')
{
erreur=1;
$('#err_mail').html('<p>Vous devez inscrire un email (celui-ci ne servira que pour la récupération du password).</p>');
}
if(erreur==0)
{
$('#formulaire2').show();
$('#formulaire1').hide();
$("#haut").html("Création de votre personnage");
}
}
);Modifié par Lothindil (14 May 2012 - 15:57)
Ce qui est chouette à vous entendre, c'est que la partie que je travaille n'a pas été réfléchie minutieusement avant et que j'ai jamais fait de test sur des panels ou autres...