V??rification javascript ?? la web 2.0

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

// 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

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);

}

</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