11480 sujets

JavaScript, DOM et API Web HTML5

Ce même sujet a était posé dans le salon Standards web et langages serveurs
Mais j'aimerais l'appliqué en javascript...
Docn en gros, je voudrais faire une fonction sur un formulaire qui va vérifier le contenu de certains input.
Je sais comment déclencher la fonction mais je ne sais absolument pas comment vérifier si l'input contient un nombre ou du texte...

Merci d'avance Smiley cligne
Modifié par DarkHerumor (15 Dec 2006 - 21:37)
Modérateur
... Bonjour ...

<!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[

(function(){

var oO =
{
   ExpReg: /^\d+$/,

   _Connect: function(oElem, sEvType, fn, bCapture)
   {
      oElem.addEventListener ?
         oElem.addEventListener(sEvType, fn, bCapture) :
         oElem.attachEvent ?
            oElem.attachEvent('on' + sEvType, fn) :
            oElem['on' + sEvType] = fn;
   },

   _Verif: function(oChamp)
   {
         var sResult = oO.ExpReg.test(oChamp.value) ?
             oChamp.value :
             "Il n'y a pas que des chiffres !";
         return alert(sResult);
   }
};

try
{
   oO._Connect(window, 'load', function()
   {
      var oForm = document.getElementById('form'), 
          oChamp = document.getElementById('nbre');
      oO._Connect(oForm, 'submit', function(){ oO._Verif(oChamp); }, false);
      oO._Connect(oChamp, 'focus', oChamp.select, false);
   }, false);
}
catch(e){};

})();

//]]></script></head><body>

<form id="form" action="" method="post">
   <div>
         <label for="nbre">En quelle année es-tu né ? </label>
         <input type="text" name="nbre" id="nbre" value="Entrez un nombre" />
         <input type="submit" value="transmettre" />
   </div>
</form>

</body></html>

Modifié par koala64 (15 Dec 2006 - 21:24)
oula rien que ça Smiley ohwell
j'ai fouiller un peu sur mon ami google et j'ai remarquer une fonction sympathoche isNaN().
Elle peu fonctionner a ton avis?

le code de mise en situation m'a l'air correct:

<html>
<head>
  <script language="JavaScript" type="text/javascript">
    function valider()
    {
        var nombre = document.form.nombre.value;
        if(!isNaN(nombre))
          alert("Le nombre est correct !");
        else
          alert("La valeur saisie n'est pas un nombre !")
        return false;
    }
  </script>
<body>
    <form name="form">
        <input type="text" name="nombre" value=""/>
        <input type="submit" value="Valider" onclick="valider();">
    </form>
</body>
</html>
Après avoir bidouillé un peu pour l'adapter a mon propre code j'ai réussi ça:

function verif(indice)
{
	//je récupère la valeur de nom input grâce a aons nom
	var nombre = document.getElementsByName(indice)[0].value;
	if(isNaN(nombre))	//Si ce n'est PAS un nombre
	{
		//J'averti l'utilisateur
		alert("Ce n'est pas un Nombre!");
		//Je force mon input a 0
		document.getElementsByName(indice)[0].value=0;
	}
}
Modérateur
Si tu veux conserver isNaN, oui c'est adapté... Smiley smile Pour le reste, je te conseille de lire ces deux tutos :

- tuto 1
- tuto 2

PS : L'efficacité d'un code ne se mesure pas à sa longueur... Ton code te bride et non celui que je t'ai proposé...
Modifié par koala64 (15 Dec 2006 - 21:46)
Oui je suis d'accord avec toi, mais étant débutant je n'aime pas appliqué des choses que je ne comprend pas, après c'est sur ça marche super bien dans tout les cas, mais moi personellement ça ne fais pas avancer ou alors il faudrait que je passe pas mal de de temps pour bien comprendre ta proposition ce que je ferais évidemment mais quand j'aurais le temps Smiley confus

Tu dis que mon idée me bride? tu peu me dire a quel moment Smiley confused

En tout cas merci pour ton aide car c'est grâce à ce genre de coup de pouce que les débutants (enfin je parle pour moi là ^^)
Modérateur
oui, je conçois que la longueur du code te déstabilise un peu mais c'est pourquoi je t'ai invité à lire ces 2 tutos... Tout y est expliqué... Smiley cligne
Modérateur
a écrit :
Tu dis que mon idée me bride? tu peu me dire a quel moment Smiley confused
ici :
<input type="submit" value="Valider" [#red]onclick="valider();"[/#] />
à cause de l'événement onclick.
Ok je vois a peu près pourquoi en ayant parcouru les liens mais je t'avoue que j'ai énormement de mal a comprendre ton sript Smiley rolleyes
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?
Modifié par DarkHerumor (16 Dec 2006 - 00:27)
Je sais pas si refaire un autre sujet pour ça, mais 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? Smiley sweatdrop
(j'en demande beaucoup a force non? ^^)
Modifié par DarkHerumor (16 Dec 2006 - 00:28)
Modérateur
a écrit :
j'en demande beaucoup a force non? ^^
Non, non... sauf que ça va se corser... Smiley lol

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. Smiley smile

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... Smiley langue

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? Smiley sweatdrop
Oui, c'est possible ! Smiley ravi 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 Smiley cligne ) :
<!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... Smiley confused
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). Smiley biggrin
Modifié par koala64 (16 Dec 2006 - 03:07)
Le code est vraiment impressionnant mais en y passant un peu de temps et s'aidant des tutos présents sur ce site j'ai compris le fonctionnement globale.

Je dis pas que je serais capable de le re-pondre de tête mais si je comprend bien il peu être utiliser pour tout type d'évènement? il suffit de modifier quelques paramètres (le type d'évènement, sur quel objet et bien sur la fonction à adopter).

En tout cas merci beaucoup avec ce script j'ai beaucoup appris (surtout grâce a tes commentaires Smiley cligne )
Modérateur
Salut,

DarkHerumor a écrit :
Je dis pas que je serais capable de le re-pondre de tête mais si je comprend bien il peu être utiliser pour tout type d'évènement? il suffit de modifier quelques paramètres (le type d'évènement, sur quel objet et bien sur la fonction à adopter).
Si tu parles de la méthode _Connect, elle peut en effet servir à affecter n'importe quelle fonction sur n'importe quel objet à l'événement de ton choix. Néanmoins, la manière de procéder par la suite n'est pas forcémment la même si c'est un 'click', un 'mouseover', un 'focus' ou autre, principalement à cause de la transmission ou non des événements d'un élément à l'autre... Tout dépend du type d'événement et de ce que tu cherches à faire.

Tu n'es pas obligé de réemployer toutes ces méthodes lors de tes futurs scripts ; il vaut mieux avancer à ton rythme mais ça te montre déjà quelques pistes à explorer... Smiley smile
J'ai réussi a ajouter un méthode avec le _connect() sur un bouton avec l'évènement [i]click pour une remise a zéro et ça marche !! Smiley lol

try
{
   oO._Connect(window, 'load', function()
   {
      var oForm = document.getElementById('raz');
      oO._Connect(oForm, 'click', oO._Raz, false);
   }, false);
}
catch(e){};
[/i]
J'ai bien sur créer une nouvelle fonction _Raz() à l'Objet Oo et tout à marché sans problème j'ai compris le fonctionnement avec pas mal de recherche et de lecture sur les tutos d'alsacreations et sur l'ami Google Smiley biggrin
Modifié par DarkHerumor (17 Dec 2006 - 20:26)