Controle de formulaire html, controle javascript par fonction

Marsh Posté le 09-02-2009 à 09:43:15

Bonjours avant tout voici le formulaire html ( de test bien sur ),

Code :

<form action="" method="post" name="formulaire">
<div id="info">
<input name="sire" type="text" size="15" onKeyUp="mail();"/>
</div>
</form>

Voici le code javascript :

Code :

function mail(ici ) {
if (this.value != "" ) {
aroba = document.formulaire.this.value.indexOf('@');
point = document.formulaire.this.value.indexOf('.');
if ((aroba < 0)|| (point < 0)) {
document.formulaire.this.style.backgroundColor ="#CC0033";
}
else { document.formulaire.this.style.backgroundColor ="#33FF00";}
}
}

Bon mon probléme est que je voudrai pouvoir avoir une fonction javascript totalement transposable à un autre formulaire, et à un autre input, soit via le passage de paramétre dans la fonction soit avec le this.
Mais je ne comprend pas vraiment comment fonctionne le this, ni comment intégré une variable pour faire le index of..

Merci de vos réponse.

Message édité par Bilbo248 le 09-02-2009 à 09:43:29

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique

Reply

Marsh Posté le 09-02-2009 à 09:43:15

Reply

Marsh Posté le 09-02-2009 à 11:23:38

Code :

<input name="sire" id="sire" type="text" size="15" onKeyUp="verif_mail("sire" );" />

Code :

function verif_mail(lemail) {
   if (document.getElementById(lemail).value != "" ) {
      aroba = document.getElementById(lemail).value.indexOf('@');
      point = document.getElementById(lemail).value.indexOf('.');
      if ((aroba < 0)|| (point < 0))   {
        document.getElementById(lemail).style.backgroundColor ="#CC0033";
      }
      else { document.getElementById(lemail).style.backgroundColor ="#33FF00";}
      }
   }
}

Quelques remarques :
- J'aurais tendance à mettre la vérification à la sortie, plutôt qu'au "onKeyUp"
- La vérification du mail est sommaire. Tu devrais utiliser une expression régulière.
- Renomme ta fonction. mail(), ce n'est pas assez parlant et tu risques d'avoir des conflits de fonctions...
- Une taille de 15 pour un mail, c'est un peu court.
- Enlève le div dans le form ! Un div est un élément "bloc", tout comme le form. Or, d'après le w3c on ne doit pas emboîter des éléments blocs...

Message cité 1 fois

Reply

Marsh Posté le 09-02-2009 à 11:52:37

macgawel a écrit :

Code :

<input name="sire" id="sire" type="text" size="15" onKeyUp="verif_mail("sire" );" />

Code :

function verif_mail(lemail) {
   if (document.getElementById(lemail).value != "" ) {
      aroba = document.getElementById(lemail).value.indexOf('@');
      point = document.getElementById(lemail).value.indexOf('.');
      if ((aroba < 0)|| (point < 0))   {
        document.getElementById(lemail).style.backgroundColor ="#CC0033";
      }
      else { document.getElementById(lemail).style.backgroundColor ="#33FF00";}
      }
   }
}

Quelques remarques :
- J'aurais tendance à mettre la vérification à la sortie, plutôt qu'au "onKeyUp"
- La vérification du mail est sommaire. Tu devrais utiliser une expression régulière.
- Renomme ta fonction. mail(), ce n'est pas assez parlant et tu risques d'avoir des conflits de fonctions...
- Une taille de 15 pour un mail, c'est un peu court.
- Enlève le div dans le form ! Un div est un élément "bloc", tout comme le form. Or, d'après le w3c on ne doit pas emboîter des éléments blocs...

A la sortie ?
Avec php ?
J'ai des notions assez limité de java..
Cet méthode assez simpliste me convient plutôt bien, le contrôle n'a pas besoin besoin d'être rigoureux.
POur le renommage de la fonction je suis d'accord.
La taille du champ est pour le moment ignoré.
Hum çà peut créer des problèmes cet histoire du div dans le form ?

Message cité 1 fois

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique

Reply

Marsh Posté le 09-02-2009 à 12:57:57

Bilbo248 a écrit :

A la sortie ?
Avec php ?

PHP :??:
Il n'y a pas de PHP ici !

Bilbo248 a écrit :

J'ai des notions assez limité de java..

JavaScript.

Bilbo248 a écrit :

Cet méthode assez simpliste me convient plutôt bien, le contrôle n'a pas besoin besoin d'être rigoureux.

Si tu veux pousser un peu, va voir les expressions régulière... Ca ouvre des possibilités impressionantes.

Bilbo248 a écrit :

Hum çà peut créer des problèmes cet histoire du div dans le form ?

Pas plus que ça, mais ça peut... Au minimum, les navigateurs "alternatifs" (pour aveugles, par exemple) risquent de ne pas comprendre le formulaire...

Message cité 1 fois

Reply

Marsh Posté le 10-02-2009 à 09:26:41

macgawel a écrit :

PHP :??:
Il n'y a pas de PHP ici !

macgawel a écrit :

JavaScript.

macgawel a écrit :

Si tu veux pousser un peu, va voir les expressions régulière... Ca ouvre des possibilités impressionantes.

macgawel a écrit :

Pas plus que ça, mais ça peut... Au minimum, les navigateurs "alternatifs" (pour aveugles, par exemple) risquent de ne pas comprendre le formulaire...

Juste que les contrôles j'aurai pu les traité via php.
J'ai entendu parler des expressions réguliére sur php, et si c'est quelque chose du genre oui çà à l'air puissant mais compliqué, mais va falloir que je m'y mette.
Et je sais par avance que mon application ne sera pas utilisé par une personne visuellement déficiente.

J'ai un autre souci, comment faire un controle de selection de liste ?
Par exemple j'ai çà :

Code :

<select id="liste_race" onblur="choix_liste('liste_race')"><option>remplie par une requête</option></select>

Et je veux que çà soit rouge lorsque aucun choix n'est fait.

Merci des tes judicieux conseil.

Message cité 1 fois

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique

Reply

Marsh Posté le 10-02-2009 à 09:55:15

Bilbo248 a écrit :

Juste que les contrôles j'aurai pu les traité via php.

Ce serait mieux... Ne serait-ce que parce que, justement, on pourrait désactiver le Javascript, et s'il n'y a pas de vérification côté serveur ça peut provoquer des gros problèmes derrière...

Pour ta liste déroulante, il "suffit" de contrôler sa valeur, et de définir le background-color à rouge... En JS ça peut se faire avec un document.getElementById(maliste).style

Message cité 1 fois

Reply

Marsh Posté le 10-02-2009 à 11:48:18

macgawel a écrit :

Ce serait mieux... Ne serait-ce que parce que, justement, on pourrait désactiver le Javascript, et s'il n'y a pas de vérification côté serveur ça peut provoquer des gros problèmes derrière...

Pour ta liste déroulante, il "suffit" de contrôler sa valeur, et de définir le background-color à rouge... En JS ça peut se faire avec un document.getElementById(maliste).style

Je suis sur que l'utilisateur disposera de Javascript et qu'il sera activé.
Je sais faire avec php le controle d'erreur, mais mon but est de le faire sous js pour cet application.
Pour la liste j'ai trouvé :

Code :

function choix_liste(nomliste) {
msg = document.getElementById(nomliste).selectedIndex;
if ( msg=='0') {
document.getElementById(nomliste).style.backgroundColor = "#CC0033";
document.getElementById("Valider" ).disabled=true;}
else {document.getElementById(nomliste).style.backgroundColor = "#33FF00";
document.getElementById("Valider" ).disabled=false; }
}

En considérant bien sur que le choix par défaut soit nul ou soit une information, ce qui est mon cas.

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique

Reply

Controle de formulaire html, controle javascript par fonction

Sujets relatifs:

Leave a Replay