Javascript pour formulaire

Résolu
Bonjour,
J'ai fait un formulaire et j'aimerais rendre des champ obligatoire, mais sans message d'alerte qui s'ouvre dans une nouvelle boite de dialogue,j'aimerais juste dfaire une phrase a cote du champ text ou radio ou checkbox avec un petit message. Et je n'y arrive pas...

merci
Configuration: Windows
Firefox 3.5.2

10 réponses

  1. Contributeur
    Bonjour,

    il faut utiliser la fonction innerHTML (en js) qui te permet d ajouter du code alors que la page est déjà chargée

    ex:
    document.getElementById('MonHtml').innerHTML += '<br>Ici mon code \n';

    sinon, y a l ajax (plus compliqué...)

    peros, j utilise aussi une autre fonction que tu peux t inspirer, elle me sert à vérifier, lors de la creation d un compte utilisateur, que le mot de passe entré est le meme que celui de la confirmation : cet exemple active ou desactive le bouton submit celon la verif du mot de passe.. à toi d adapter à tes besoins ;)

    php:
    $Html.='<td width=250>Mot de passe : </td><td width=300><input MAXLENGTH=20 size=30 id="password1" name="password1" type="text" onkeyup="VerifPassword()"></td><tr>';

    $Html.='<td>Confirmer : </td><td><input size=30 id="password2" MAXLENGTH=20 name="password2" type="text" onkeyup="VerifPassword()"></td><tr>';

    js :
    function VerifPassword(){
    if (document.getElementById('password1').value != document.getElementById('password2').value){
    document.getElementById('BtnValid').disabled=true;
    }else{
    document.getElementById('BtnValid').disabled=false;
    }
    }
    0
    1. dsl double poste, connection de merde...
      0
      1. je me suis bien inspire de ton code mais en le simplifiant^^

        le script:

        <script>
        function Verification(){
        if (document.getElementById('nom').value=""){
        document.getElementById('error').display=block;
        }else{
        document.getElementById('BtnValid').disabled=false;
        }
        }
        </script>

        la partie du formulaire:

        <td>Civilité</td><td>
        <select name="civilite">
        <option value="Mr">Mr</option>
        <option value="Melle">Melle</option>
        <option value="Mme">Mme</option>
        <div id="erreurecivilite" id="error" style="display:none">Le champ n'est pas remplie</div>

        et l'activation de la fonction:

        <td><input type="button" name="valider" onClick="verification;" /></td>

        mais ca ne marche pas.... tu vois pourquoi?
        (quand je clique sur le button rien ne ce passe)
        0
        1. Contributeur
          re :)

          1)
          if (document.getElementById('nom').value="")
          il est ou id="Nom" dan ston html ??

          2)
          document.getElementById('error').display=block;
          =>
          document.getElementById('error').style="display:block";

          3)
          si document.getElementById('BtnValid').disabled=false;
          =>
          <input type="button" id="BtnValid" name="valider" onClick="verification;" />

          4)
          dans ton <div> tu as 2 id !!

          ==>

          <script>
          function Verification(){
          if (document.getElementById('nom').value=""){
          document.getElementById('error').style="display:block";
          }else{
          document.getElementById('BtnValid').disabled=false;
          }
          }
          </script>

          la partie du formulaire:

          <td>Civilité</td><td>
          <input type="text" name="nom">
          <select name="civilite">
          <option value="Mr">Mr</option>
          <option value="Melle">Melle</option>
          <option value="Mme">Mme</option>
          </select>
          <div class:"erreurecivilite" id="error" style="display:none">Le champ n'est pas remplie</div>

          et l'activation de la fonction:

          <td><input type="button" id="BtnValid" name="valider" onClick="verification;" /></td>

          essaye avec ca ;)
          0
          1. re re

            <script>
            <script>
            function Verification(){
            if (document.getElementById('nom').value=""){
            document.getElementById('erreurnom').style="display:block";
            }else{
            document.getElementById('BtnValid').disabled=false;
            }
            }
            </script>

            (j'ai changer pour que ce oit vraiment le nom cette fois^^)

            <td>Nom</td><td><input type="text" name="nom" /></td>
            <div id="erreurenom" id="error" style="display:none">Le champ n'est pas remplie</div>
            </tr><tr>

            <td><input type="button" id="BtnValid" name="valider" onClick="verification();" /></td>

            et la quand je vais dans la console d'erreure de firefox j'ai un: verification is not defined

            merci
            0
            1. Contributeur
              tu as toujours 2 id dans ton div !!

              id="erreurenom" et id="error"

              onClick="Verification();"

              gaffe au minuscule/majuscule ! ;)
              0
              1. Contributeur
                et il te manque un id="nom"

                =>

                <td>Nom</td><td><input type="text" id="nom" name="nom" /></td>
                0
                1. Contributeur
                  mais a ta place, je ferais :

                  <script>
                  function Verification(){
                  if (document.getElementById('nom').value == ""){
                  document.getElementById('BtnValid').disabled=true;
                  }else{
                  document.getElementById('BtnValid').disabled=false;
                  }
                  }
                  </script>
                  
                  <td>Nom</td><td><input type="text" id="nom" name="nom" onkeyup="Verification();" /></td>
                  </tr><tr>
                  
                  
                  <td><input type="submit" id="BtnValid" name="valider" value="Valider" disabled="true" /></td>
                  
                  0
                  1. ra j'ai vue juste après je l'ai corrige (l'histoire d'id")

                    </tr><tr>
                    <td>Nom</td><td><input type="text" name="nom" /></td>
                    <div id="erreurenom" style="display:none">Le champ n'est pas remplie</div>
                    </tr><tr>
                    script inchange

                    <script>
                    <script>
                    function Verification(){
                    if (document.getElementById('nom').value=""){
                    document.getElementById('erreurnom').style="display:block";
                    }else{
                    document.getElementById('BtnValid').disabled=false;
                    }
                    }
                    </script>

                    et maj verifie, toujours le meme....
                    <td><input type="button" id="BtnValid" name="valider" onClick="Verification();" /></td>
                    0
                    1. <script>

                      function Verification(){

                      if (document.getElementById('nom').value==""){

                      document.getElementById('erreurenom').style.display="block";
                      }

                      else{

                      document.getElementById('BtnValid').disabled=false;
                      }
                      }
                      </script>

                      </tr><tr>
                      <td>Nom</td><td><input type="text" name="nom" id="nom"/></td>
                      </tr><tr>
                      <td></td><td><div id="erreurenom" style="display:none">Le champ n'est pas remplie</div></td>
                      </tr><tr>

                      <td><input type="button" id="BtnValid" name="valider" onClick="Verification();" /></td>

                      ca fonctionne comme ca , merci pour ton aide
                      0