Gravité sur un formulaire d’inscription avec jQuery

Il est parfois (toujours ?) judicieux de vérifier les champs d’un formulaire avant de continuer plus loin, de plus un formulaire d’inscription doit être accrocheur pour donner a l’utilisateur l’envie de s’inscrire.

Rien de pire qu’un formulaire qui vous renvoi sur la page d’inscription parce que vous avez oublié de remplir un champ.

Pour rendre accrocheur notre formulaire, on va y ajouter un effet de gravité qui déploie le champ suivant, lorsque le champ est bien rempli.

Code Javascript :

Le code javascript contient $(« #email »).keyup(function(){} ou email est le nom de notre champ.

La fonction keyup vérifie l’expression régulière et valide si tout est bon, sinon elle affiche un message d’erreur.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(function()
{
// Displaying first list email field
$("ul li:first").show();
// Regular Expressions
var ck_username = /^[A-Za-z0-9_] 
{3,20}$/;
var ck_email = /^([\w-] +(?:\.[\w-] +)*)@((?:[\w-] +\.)*\w[\w-] {0,66})\.([a-z] {2,6}(?:\.[a-z] 
{2})?)$/i;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_] 
























































{6,20}$/;
// Email validation
$('#email').keyup(function()
{
var email=$(this).val();
if (!ck_email.test(email))
{
$(this).next().show().html("Enter valid email");
}
else
{
$(this).next().hide();
$("li").next("li.username").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Username validation
$('#username').keyup(function()
{
var username=$(this).val();
if (!ck_username.test(username))
{
$(this).next().show().html("Min 3 charts no space");
}
else
{
$(this).next().hide();
$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Password validation
$('#password').keyup(function()
{
var password=$(this).val();
if (!ck_password.test(password))
{
$(this).next().show().html("Min 6 Charts");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Submit button action
$('#submit').click(function()
{
var email=$("#email").val();
var username=$("#username").val();
var password=$("#password").val();
if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) )
{
$("#form").show().html("<h1>Thank you!</h1>");
}
return false;
});

})
</script>

Code HTML :

Le code html est simple, c’est juste un formulaire

<form method="post" >
<ul>
<li>
<label>Email: </label><br/>
<input type="text" name="email" id="email" />
<span></span>
</li>
<li>
<label>Username: </label><br/>
<input type="text" name="username" id="username" />
<span></span>
</li>
<li>
<label>Password: </label><br/>
<input type="password" name="password" id="password" />
<span></span>
</li>
<li>
<input type="submit" value=" Register " id='submit'/>
</li>
</ul>
</form>

Code CSS :

Icion a li {display:none} pour cacher tout les champs et jQuery affichera seulement le premier avec li:first (le champs e-mail).

ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"] , input[type="password"] 








{
border:solid 2px #009900;
font-size:14px;
padding:4px;
width:180px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"] 




















{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:350px;
margin:0 auto;
margin-top:30px;
}

Voila, vous avez maintenant un formulaire avec un effet de gravité lorsque le champs est bien rempli.