Magazine

Vérification javascript à la web 2.0

Publié le 31 mai 2008 par Abdeldjalil Belakhdar

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


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Abdeldjalil Belakhdar 10 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte