Une jolie vérification en combinant du javascript avec du css n’est pas difficile et voici un exemple d’un formulaire d’inscription asser simple en utilisant des messages d’erreurs plus jolie que la légendaire boite de dialogue alert
Donc au début nous avons notre formulaire dont voici le code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
body{
text-align:center;
margin:auto;
margin-top: 40px;
}
#global{
text-align:center;
margin:auto;
width: 400px;
height: 300px;
}
#general_form{
text-align:left
}
.input_form{
margin: 10px;
padding: 10px;
width:auto;
}
.text_input{
float:left;
display:block;
width: 80px;
height: 20px;
text-align:left;
margin-right: 20px;
}
input{
width: 100px;
height: 20px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id=”global”>
<div id=”text_inscription”>Formulaire d’inscription</div>
<form id=”form1″ name=”form1″ method=”post” action=”">
<div id=”general_form”>
<div class=”input_form”>
<span class=”text_input”>username</span>
<input type=”text” name=”user” id=”user” />
<span id=”msg_user”></span>
</div>
<div class=”input_form”>
<span class=”text_input”>password</span>
<input type=”password” name=”pass1″ id=”pass1″ />
<span id=”msg_pass1″></span>
</div>
<div class=”input_form”>
<span class=”text_input”>re-password</span>
<input type=”password” name=”pass2″ id=”pass2″ />
<span id=”msg_pass2″></span>
</div>
</div>
</form>
</div>
</body>
</html>
Vous remarquerez que le tout est fait en div afin de nous simplifié la tache et nous donner plus de liberté, biensure rien n’est obligatoire, personnellement quand il s’agit d’une région ou va y’avoir manipulation je privilégie les div au table
Donc voila pour le début, maintenant avant de continué nous avons besoin de jolie icon, une pour le succss et l’autre pour le failed, plusieurs site sont là a cette effet comme iconlook ou iconfinder
Apres avoir trouvé les icons que nous allons utilisé nous pouvons nous attaquer au code JavaScript, au début on crée une fonction appeler validate() que voici
<script language=”javascript”>
// fonction de test de validités
function validate(id){
var val = document.getElementById(id).value;
var img_span = document.getElementById(’msg_’+id);
// condition de verification de la validité
if(val != “” & val.length > 4){
img_span.innerHTML = “<img src=’agt_action_success.png’ border=0 />”;
}else{
img_span.innerHTML = “<img src=’agt_action_fail.png’ border=0 />”;
}
}
</script>
et ou on va l’exécuter a chaque fois que l’utilisateur tape un caractère ce qui implique l’utilisation de l’événement onkeypress dans notre champ text
onkeypress=”validate(this.id)”
Donc au final voila le code qu’on aura
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
body{
text-align:center;
margin:auto;
margin-top: 40px;
}
#global{
text-align:center;
margin:auto;
width: 400px;
height: 300px;
}
#general_form{
text-align:left
}
.input_form{
margin: 10px;
padding: 10px;
width:auto;
}
.text_input{
float:left;
display:block;
width: 80px;
height: 20px;
text-align:left;
margin-right: 20px;
}
input{
width: 100px;
height: 20px;
font-size: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script language=”javascript”>
// fonction de test de validités
function validate(id){
var val = document.getElementById(id).value;
var img_span = document.getElementById(’msg_’+id);
// condition de verification de la validité
if(val != “” & val.length > 4){
img_span.innerHTML = “<img src=’agt_action_success.png’ border=0 />”;
}else{
img_span.innerHTML = “<img src=’agt_action_fail.png’ border=0 />”;
}
}
</script>
</head>
<body>
<div id=”global”>
<div id=”text_inscription”>Formulaire d’inscription</div>
<form id=”form1″ name=”form1″ method=”post” action=”">
<div id=”general_form”>
<div class=”input_form”>
<span class=”text_input”>username</span>
<input type=”text” name=”user” id=”user” onkeypress=”validate(this.id)” />
<span id=”msg_user”></span>
</div>
<div class=”input_form”>
<span class=”text_input”>password</span>
<input type=”password” name=”pass1″ id=”pass1″ onkeypress=”validate(this.id)”/>
<span id=”msg_pass1″></span>
</div>
<div class=”input_form”>
<span class=”text_input”>re-password</span>
<input type=”password” name=”pass2″ id=”pass2″ onkeypress=”validate(this.id)”/>
<span id=”msg_pass2″></span>
</div>
</div>
</form>
</div>
</body>
</html>
Pour voir l’exemple cliquez ici
Pour le télécharger cliquez ici