Voici mon code en entier , en rouge la partie concerné :
Code : Tout sélectionner
<!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>Document sans titre</title>
<style>
body {
padding-top: 50px;
}
.form_col {
display: inline-block;
margin-right: 15px;
padding: 3px 0px;
width: 200px;
min-height: 1px;
text-align: right;
}
input {
padding: 2px;
border: 1px solid #CCC;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
input:focus {
border-color: rgba(82, 168, 236, 0.75);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
}
.correct {
border-color: rgba(68, 191, 68, 0.75);
}
.correct:focus {
border-color: rgba(68, 191, 68, 0.75);
-moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
-webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
}
.incorrect {
border-color: rgba(191, 68, 68, 0.75);
}
.incorrect:focus {
border-color: rgba(191, 68, 68, 0.75);
-moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
-webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
}
.tooltip {
display: inline-block;
margin-left: 20px;
padding: 2px 4px;
border: 1px solid #555;
background-color: #CCC;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<form id="myForm">
<label class="form_col" for="lastName">Nom :</label>
<input name="lastName" id="lastName" type="text" />
<span class="tooltip">Un nom ne peut pas faire moins de 2 caractères</span>
<br /><br />
<label class="form_col" for="firstName">Prénom :</label>
<input name="firstName" id="firstName" type="text" />
<span class="tooltip">Un prénom ne peut pas faire moins de 2 caractères</span>
<br /><br />
<label class="form_col" for="entreprise">Entreprise :</label>
<input name="entreprise" id="entreprise" type="text" />
<span class="tooltip">Une entreprise ne peut pas faire moins de 2 caractères</span>
<br /><br />
<label class="form_col" for="adresse">Adresse :</label>
<input name="adresse" id="adresse" type="text" />
<span class="tooltip">Une adresse ne peut pas faire moins de 5 caractères</span>
<br /><br />
<label class="form_col" for="CP">Code Postal :</label>
<input name="CP" id="CP" type="text" />
<span class="tooltip">Un code postal ne peut pas faire moins de 2 caractères</span>
<br /><br />
<label class="form_col" for="ville">Ville :</label>
<input name="ville" id="ville" type="text" />
<span class="tooltip">Une ville ne peut pas faire moins de 2 caractères</span>
<br /><br />
<label class="form_col" for="ntel1">N° de téléphone 1 :</label>
<input name="ntel1" id="ntel1" type="text" />
<span class="tooltip">Un n° de téléphone doit comporter 10 chiffres</span>
<br /><br />
<label class="form_col" for="ntel2">N° de téléphone 2 :</label>
<input name="ntel2" id="ntel2" type="text" />
<span class="tooltip">Un n° de téléphone doit comporter 10 chiffres</span>
<br /><br />
<label class="form_col" for="fax">Fax :</label>
<input name="fax" id="fax" type="text" />
<span class="tooltip">Un n° de fax doit comporter 10 chiffres</span>
<br /><br />
<label class="form_col" for="site">Site web :</label>
<input name="site" id="site" type="text" />
<span class="tooltip">Un site web ne peut pas faire moins de 4 caractères</span>
<br /><br />
<label class="form_col" for="mail">Mail :</label>
<input name="mail" id="mail" type="text" />
<span class="tooltip">Format d'adresse mail non valide</span>
<br /><br />
<label class="form_col" for="pwd1">Mot de passe :</label>
<input name="pwd1" id="pwd1" type="password" />
<span class="tooltip">Le mot de passe ne doit pas faire moins de 6 caractères</span>
<br /><br />
<label class="form_col" for="pwd2">Mot de passe (confirmation) :</label>
<input name="pwd2" id="pwd2" type="password" />
<span class="tooltip">Le mot de passe de confirmation doit être identique à celui d'origine</span>
<br /><br />
<span class="form_col"></span>
<input type="submit" value="M'inscrire" /> <input type="reset" value="Réinitialiser le formulaire" />
</form>
<script>
// Fonction de désactivation de l'affichage des "tooltips"
function deactivateTooltips() {
var spans = document.getElementsByTagName('span'),
spansLength = spans.length;
for (var i = 0 ; i < spansLength ; i++) {
if (spans[i].className == 'tooltip') {
spans[i].style.display = 'none';
}
}
}
// La fonction ci-dessous permet de récupérer la "tooltip" qui correspond à notre input
function getTooltip(elements) {
while (elements = elements.nextSibling) {
if (elements.className === 'tooltip') {
return elements;
}
}
return false;
}
// Fonctions de vérification du formulaire, elles renvoient "true" si tout est ok
var check = {}; // On met toutes nos fonctions dans un objet littéral
check['lastName'] = function(id) {
var name = document.getElementById(id),
tooltipStyle = getTooltip(name).style;
if (name.value.length >= 2) {
name.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
name.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['firstName'] = check['lastName']; // La fonction pour le prénom est la même que celle du nom
check['entreprise'] = function() {
var entreprise = document.getElementById('entreprise'),
tooltipStyle = getTooltip(entreprise).style;
if (entreprise.value.length >= 2) {
entreprise.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
entreprise.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['adresse'] = function() {
var adresse = document.getElementById('adresse'),
tooltipStyle = getTooltip(adresse).style;
if (adresse.value.length >= 2) {
adresse.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
adresse.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['CP'] = function() {
var CP = document.getElementById('CP'),
tooltipStyle = getTooltip(CP).style;
if (CP.value.length == 5) {
CP.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
CP.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['ville'] = function() {
var ville = document.getElementById('ville'),
tooltipStyle = getTooltip(ville).style;
if (ville.value.length >= 2) {
ville.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
ville.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['ntel1'] = function() {
var ntel1 = document.getElementById('ntel1'),
tooltipStyle = getTooltip(ntel1).style;
if (ntel1.value.length >= 2) {
ntel1.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
ntel1.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['ntel2'] = function() {
var ntel2 = document.getElementById('ntel2'),
tooltipStyle = getTooltip(ntel2).style;
if (ntel2.value.length == 10) {
ntel2.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
ntel2.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['fax'] = function() {
var fax = document.getElementById('fax'),
tooltipStyle = getTooltip(fax).style;
if (fax.value.length == 10) {
fax.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
fax.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['site'] = function() {
var site = document.getElementById('site'),
tooltipStyle = getTooltip(site).style;
if (site.value.length >= 4) {
site.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
site.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
[color=#FF0040] check['mail'] = function() {
var mail = document.getElementById('mail'),
tooltipStyle = getTooltip(mail).style;
if (mail.value.length >= 4) {
mail.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
mail.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
}[/color]
check['pwd1'] = function() {
var pwd1 = document.getElementById('pwd1'),
tooltipStyle = getTooltip(pwd1).style;
if (pwd1.value.length >= 6) {
pwd1.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
pwd1.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
check['pwd2'] = function() {
var pwd1 = document.getElementById('pwd1'),
pwd2 = document.getElementById('pwd2'),
tooltipStyle = getTooltip(pwd2).style;
if (pwd1.value == pwd2.value && pwd2.value != '') {
pwd2.className = 'correct';
tooltipStyle.display = 'none';
return true;
} else {
pwd2.className = 'incorrect';
tooltipStyle.display = 'inline-block';
return false;
}
};
// Mise en place des événements
(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
var myForm = document.getElementById('myForm'),
inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length;
for (var i = 0 ; i < inputsLength ; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {
inputs[i].onkeyup = function() {
check[this.id](this.id); // "this" représente l'input actuellement modifié
};
}
}
myForm.onsubmit = function() {
var result = true;
for (var i in check) {
result = check[i](i) && result;
}
if (result) {
alert('Le formulaire est bien rempli.');
}
return false;
};
myForm.onreset = function() {
for (var i = 0 ; i < inputsLength ; i++) {
if (inputs[i].type == 'text' || inputs[i].type == 'password') {
inputs[i].className = '';
}
}
deactivateTooltips();
};
})();
// Maintenant que tout est initialisé, on peut désactiver les "tooltips"
deactivateTooltips();
</script>
</body>
</html>
