a écrit :
j'en demande beaucoup a force non? ^^
Non, non... sauf que ça va se corser...
a écrit :
rien que le ExpReg: /^\d+$/, me pose des soucis, j'ai fouillé un peu et j'ai compris les élements, mais je comprend pas la fonction, ça fais un test sur un contenu?
Pour entamer l'expression régulière, on commence par /^
\d indique qu'on ne veut que des chiffres
+ indique qu'il peut y en avoir un ou plusieurs
$/ termine l'expression régulière.
On teste une chaîne texte comme suit :
ExpReg.test(chaîne);
Si le test est réussi, ça renvoie true sinon false, ce pourquoi on affecte cette expression en tant que condition.
Le problème avec isNaN est que si ton champ n'est pas rempli, ça passe quand même... donc, tout compte fait, mieux vaut conserver l'expression régulière...
a écrit :
est-ce possible de lister tout les élements (input par éxemple) d'un formulaire? j'ai chercher du coté de ...Child mais je sais pas si ça marche sur un formulaire? peut-etre qu'il faut mieu cibler les élements?
Oui, c'est possible !
Le truc, c'est que si tu veux te servir de cette fonction sur différents formulaire, tous tes champs ne vont pas forcémment être des nombres... donc une astuce, c'est de mettre une classe "chiffres" (par exemple) sur tous les champs qui vont devoir passer cette vérification.
Bon... euh... Là où çà se corse, c'est que j'emploie les événements de type DOM2 (des bidules chouettes un peu plus évolués que les onmachinchose parce que tu peux en mettre plusieurs). Le soucis, c'est qu'avec eux, tu ne peux pas te contenter d'un simple return false pour empêcher l'envoi du formulaire en cas d'invalidité... donc je rajoute une méthode supplémentaire à mon objet ( oO._CancelClick ) afin qu'elle remplace le false.
Voici ce que ça donne (J'ai ajouté des commentaires pour que tu cernes mieux ce qu'il se passe
) :
<!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>
<script type="text/javascript">//<![CDATA[
// On protège notre script des autres
(function(){
// On crée un objet
var oO =
{
// Expression Régulière
ExpReg: /^\d+$/, // N'accepte que les chiffres
// Affectation d'une fonction à un événement donné sur un élément
_Connect: function(oElem, sEvType, fn, bCapture)
{
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 de la présence des chiffres pour les champs concernés
_Verif: function(e)
{
// On crée une boucle sur les "input" du formulaire "form"
var oForm = document.getElementById('form'),
oChamp = oForm.getElementsByTagName('input'),
iI = 0,
iCount = oChamp.length;
for(iI; iI < iCount; iI++)
{
if(oChamp[iI].className != "chiffres") continue; // Passe le champ s'il n'a pas la classe "chiffres".
var sResult = oO.ExpReg.test(oChamp[iI].value) ? // Test sur chaque valeur des inputs
oChamp[iI].value : // Affecte la valeur à sResult si le champ est ok
"Il n'y a pas que des chiffres !"; // Affecte le message d'erreur à Sresult si le champ est invalide
alert(sResult); // Lance l'alerte
if(isNaN(sResult)) // Si le résultat n'est pas un nombre
{
oChamp[iI].select(); // On sélectionne le champ qui ne va pas
return oO._CancelClick(e); // On sort de la vérif en empêchant la transmission du formulaire
}
}
return true; // On transmet le formulaire si tout s'est bien passé
}
};
// On teste si le script fonctionne
try
{
// On charge le script une fois le code xhtml interprété
oO._Connect(window, 'load', function()
{
var oForm = document.getElementById('form');
oO._Connect(oForm, 'submit', oO._Verif, false); // On affecte la vérif à la soumission du formulaire
}, false);
}
catch(e){}; // Sinon on ne fait rien.
})();
//]]></script></head><body>
<form id="form" action="" method="post">
<div>
<label for="nbre1">Indiquez une première année </label>
<input type="text" name="nbre1" id="nbre1" class="chiffres" />
</div>
<div>
<label for="nbre2">Indiquez une seconde année </label>
<input type="text" name="nbre2" id="nbre2" class="chiffres" />
</div>
<div>
<label for="nbre3">Indiquez une troisième année </label>
<input type="text" name="nbre3" id="nbre3" class="chiffres" />
</div>
<div>
<input type="submit" value="transmettre" />
</div>
</form>
</body></html>
N'hésite pas à passer ça dans ton éditeur parce que sans la colorisation syntaxique, je me doute bien que c'est un peu hard...
Celà dit, même si c'est un peu long et plus difficile à comprendre, c'est ce qui reste le plus accessible (car non intrusif) et tu ne risques pas d'avoir des interactions avec d'autres scripts (dans les deux sens).
Modifié par koala64 (16 Dec 2006 - 03:07)