Salut,
Pour des traitements identiques, tu peux peut-être faire une fonction unique plutôt que de multiplier les tests sur chaque champ.
Sinon, il vaut mieux éviter de mettre des accents sur les identifiants car si le script dont tu te sers pour la vérif ne se trouve pas dans le bon charset, cela peut poser problème...
Pour ce qui est de la vérif sur chaque champ au fur et à mesure, ce n'est généralement pas apprécié par le visiteur... Je pense qu'il vaut mieux faire une vérif totale à la fin histoire de minimiser les désagréments... Enfin, il y a deux écoles donc je te laisse choisir...
Pour les alertes, il semble aussi qu'il soit préférable de faire une véritable alerte plutôt que l'ajout d'un paragraphe après le champ, essentiellement pour faciliter l'interprétation lorsque le visiteur emploie un lecteur d'écran... (QuentinC, si tu peux confirmer ou non si tu croises ce topic...
)
Enfin, si par hasard, tu conservais le paragraphe, il ne faut l'ajouter que s'il y a vraiment une erreur car un paragraphe vide dans ton xhtml n'a pas de sens...
Les éléments de ton formulaire peuvent être encadrés par des div et non des p car ça ne ressemble pas vraiment à un paragraphe donc un conteneur plus généraliste semble plus adapté.
Pour finir, tu peux passer tout ça en non intrusif pour mieux respecter la sémantique...
Je te laisse un exemple fait à la va-vite mais qui reprend tout ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">/*<![CDATA[*/
.Erreur
{
background-color: red;
}
/*]]>*/</style><script type="text/javascript">//<![CDATA[
// On protège notre script des autres
(function(){
var oO;
// On crée un objet
oO =
{
// Expression Régulière
ExpReg: /\w/g, // N'accepte que les chiffres et les lettres
// Erreurs
Erreur:
[
"Votre identifiant doit contenir des lettres ou des chiffres !",
"Votre mot de passe doit contenir des lettres ou des chiffres !",
"La confirmation de votre mot de passe doit contenir des lettres ou des chiffres !",
"Votre adresse électronique doit contenir des lettres ou des chiffres !",
"Votre nom de famille doit contenir des lettres ou des chiffres !",
"Votre prénom doit contenir des lettres ou des chiffres !"
],
// Affectation d'une fonction à un événement donné sur un élément
_Connect: function(oElem, sEvType, fn, bCapture)
{
return oElem.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = fn;
},
// Annulation du clic sur un élément
_CancelClick: function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
return false; // Pour Safari
}
else if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
else return false;
},
// Vérification des champs du formulaire
_Verif: function(oForm, e)
{
var oChamp;
var iI;
var iCount;
oChamp = oForm.getElementsByTagName('input');
iI = 0;
iCount = oChamp.length;
for(; iI < iCount; iI++)
{
if(oChamp[iI].type === ("checkbox" || "submit")) continue; // Si les champs sont de type checkbox ou submit, on itère...
var sResult;
sResult = (!oO.ExpReg.test(oChamp[iI].value)) ?
oO.Erreur[iI] : // Affecte le message d'erreur si le champ est invalide
oChamp[iI].value;
if(sResult === oO.Erreur[iI]) // Si le résultat n'est pas celui attendu
{
oChamp[iI].select(); // On sélectionne le champ qui ne va pas
oChamp[iI].className = 'Erreur'; // On lui affecte la classe CSS Erreur
alert(oO.Erreur[iI]); // On alerte de ce qui ne va pas
return oO._CancelClick(e); // On sort de la vérif en empêchant la transmission du formulaire
}
oChamp[iI].className = ''; // On supprime la classe CSS lorsque le champ est corrigé
}
return true; // On transmet le formulaire si tout s'est bien passé
}
};
// On teste si le script fonctionne
try
{
oO._Connect(window, 'load', function()
{
var oForm;
oForm = document.getElementById('form');
oO._Connect(oForm, 'submit', function(e) { return oO._Verif(oForm, e); }, false);
}, false);
}
catch(e){}; // Sinon on ne fait rien.
})();
//]]></script></head><body>
<form id="form" method="post" action="inscription.html">
<div>
<label for="identifiant">Choisissez un identifiant</label>
<input type="text" name="identifiant" id="identifiant" />
</div>
<div>
<label for="mot_de_passe">Choisissez un mot de passe</label>
<input type="password" name="mot_de_passe" id="mot_de_passe" />
</div>
<div>
<label for="mot_de_passe_confirme">Confirmez votre mot de passe</label>
<input type="password" name="mot_de_passe_confirme" id="mot_de_passe_confirme" />
</div>
<div>
<label for="adresse_electronique">Saisissez votre adresse électronique</label>
<input type="text" name="adresse_electronique" id="adresse_electronique" />
</div>
<div>
<label for="nom_de_famille">Saisissez votre nom de famille</label>
<input type="text" name="nom_de_famille" id="nom_de_famille" />
</div>
<div>
<label for="prenom">Saisissez votre prénom</label>
<input type="text" name="prenom" id="prenom" />
</div>
<div>
<label for="cgu">Accepter les Conditions générales d'utilisation</label>
<input type="checkbox" name="cgu" id="cgu" />
</div>
<div>
<input type="submit" value="Valider" id="submit" />
</div>
</form>
</body></html>
La vérif est simplifiée ici car dans un cas réel, ça ne se passerait pas ainsi... C'est juste pour te donner le principe...
Modifié par koala64 (31 Dec 2006 - 13:17)