Afficher asterisque apres un input [Résolu]

Signaler
Messages postés
180
Date d'inscription
mardi 21 décembre 2004
Statut
Membre
Dernière intervention
12 juin 2008
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Bonjour,

Voici mon problème qui ne doit pas être bien compliqué mais je trourne en rond depuis un certain temps.

J'aimerais afficher une astérisque automatiquement après un input pour signaler que c'est un champ obligatoire.
Dans ma page jsp je mets : pour les inputs obligatoires.
J'ai ensuite fait une fonction javascript (appelée au onload de ma page) qui va détecter les input de type "required" et qui doit ajouter une astérisque rouge après l'input :

function make_required()
{
   inputs = document.getElementsByTagName("i
nput");
   fo
r (i=0;i      thisInput = inputs[i];
      if
(thisInput.className.indexOf("r
equired") != -1) {

         thisInput.innerHTML+='<
font color="red"> * ';     //c'est ici que je bloque
      }

   }
}

J'arrive bien à détecter l'input qui est "required" mais je n'arriver pas à écrire l'astérisque après l'input.
Est-ce quelqu'un pourrait m'aider svp?

D'avance merci.

***  Kakol ***

10 réponses

Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014

Salut

Peut-être thisInput.parentNode.innerHTML+=' * ';
Je ne sais pas si ça fonctionne, mais ça coûte rien d'essayer.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,

    tu tentes d'ajouter dans l'innerHTML d'un input text,
          qui n'en a pas !

    en général, c'est un truc du style....
        texte pour expliquer le champ de saisie
    il faut ajouter au texte, pas à l'input.
       et ça dépend de comment tu décris cela en html....

<hr />                Cordialement            Bul        
Messages postés
180
Date d'inscription
mardi 21 décembre 2004
Statut
Membre
Dernière intervention
12 juin 2008

je sais que thisInput.innerHTML
est faux mais justement je cherche un moyen d'écrire l'étoile à droite de l'input texte, ... enfin si c'est possible

***  Kakol ***
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
c'est possible....   je te demandais comment c'est décrit....
    tu n'as pas l'air de vouloir nous donner.

je te dirais createElement + appendChild   par exemple,
    il y a d'autres solutions... mais je ne vais pas t'en faire
    la liste ( 2685975 à peu près ), qui peuvent dépendre aussi
    de comment ton html est fait. et comme on ne l'a pas....
<hr />                Cordialement            Bul        
Messages postés
180
Date d'inscription
mardi 21 décembre 2004
Statut
Membre
Dernière intervention
12 juin 2008

pardon j'avais pas saisi le sens de "décrit" voila le bout de mon html correspondant :

<form name="loginForm" method="post" action="/Web/login.do">
<table border="0" align="center">
<tr>
                   <td>Login :</td>
<td><input class="required" type="text" name="login" value=""></td>
</tr>
<tr>
<td>Mot de passe :
<td><input class="required" type="password" name="motDePasse" value=""></td>
</tr>
                <tr>
<td>Code :
<td><input type="text" name="code" value=""></td>
</tr>

<tr>
<td><input type="submit" name="btnConnection" value="Connexion" onclick="setNotNew();"></td>
<td><input type="button" name="btninit" value="Réinitialiser" onclick="eraseForm();"></td>
</tr>
</table>
</form>

Voila j'aimerais qu'un astérisque soit affichée automatiquement à coté de l'input login et de l'input password dont la classe est définie comme "required".
j'espère avoir été plus claire dans mon explication et merci pour ton aide

***  Kakol ***
Messages postés
180
Date d'inscription
mardi 21 décembre 2004
Statut
Membre
Dernière intervention
12 juin 2008

ah désolée pour le formattage ça s'est reformatté tout seul apres avoir posté le message. je vias essayé de le remettre bien :
<form name="loginForm" method="post" action="/Web/login.do">
   <table border="0" align="center">
      <tr>
         <td>Login :</td>
         <td><input class="required" type="text" name="login" value=""></td>
      </tr>
      <tr>
         <td>Mot de passe :<:td>
         <td><input class="required" type="password" name="motDePasse" value=""></td>
      </tr>
      <tr>
         <td>Code :</td>
         <td><input type="text" name="code" value=""></td>
      </tr>
      <tr>
         <td><input type="submit" name="btnConnection" value="Connexion" onclick="setNotNew();"></td>
         <td><input type="button" name="btninit" value="Réinitialiser" onclick="eraseForm();"></td>
      </tr>
   </table>
</form>

***  Kakol ***
Messages postés
180
Date d'inscription
mardi 21 décembre 2004
Statut
Membre
Dernière intervention
12 juin 2008

ah nikel ça a marché, je savais que j'étais pas loin mais il me manquait le parentNode !!!
merci et bonne continuation.

***  Kakol ***
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
avec ce que tu nous donnes...     ov3rdoze ne doit pas être bien loin...
<hr />                Cordialement            Bul        
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Bonjour bonjour bonjour
ov3rdoze -> ça doit fonctionner et si ça ne fonctione pas, il suffit d'entourer les champs avec un span ! parce que je présume que cette méthode make_required() sera appelée quelque soit le champs ( qu'il soit dans une table ou le body (et la, ça marche plus)
Sinon, la méthode encore plus bête méchante éfficace, CSS et une petite ligne tous les champs en bleu (exemple il va s'en dire) sont obligatoire !
.Required{
    background-color:blue;
}

[o-_-o]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
ah ben... téléscopage de messages.
    probablement ce qu'il y a de plus simple à écrire (dons le meiux ? )
        comme quoi donner toutes les infos est nécessaire.
<hr />                Cordialement            Bul