Formulaire : onsubmit mettre en rouge les label obligatoires

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 9 Juillet 2012.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Salut à tous,

    Je souhaiterai que lorsque l'internaute clique sur le bouton submit ça mette en rouge le texte des balises <label> qui sont obligatoires et qui n'ont pas été rempli par l'internaute, voici mon code qui marche qu'à moitié :( :

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function surligne(champ, erreur)
    {
      if(erreur)
      {
        champ.style.backgroundColor='#DBDBFF';
        champ.style.color='#000000';
        document.getElementById('oblig').style.color='red';
      }
      else
      {
        champ.style.backgroundColor='';
        champ.style.color='';
        document.getElementsById('oblig').style.color='black';
      }
    }
    function verifText(champ)
    {
      if(champ.value=='')
      {
      surligne(champ, true);
      return false;
      }
      else
      {
      surligne(champ, false);
      return true;
      }
    }
    function verifRadio(champ)
    {
       if(champ[0].checked!=true&&champ[1].checked!=true&&champ[2].checked!=true)
       {
          return false;
       }
       else
       {
          return true;
       }
    }
    function verifForm(f)
    {
       var radio_Ok = verifRadio(f.sexe);
       var nom_Ok = verifText(f.nom);
       var prenom_Ok = verifText(f.prenom);
       if(radio_Ok && nom_Ok && prenom_Ok)
          return true;
       else
       {
          alert("Merci de bien vouloir remplir tous les champs en rouge");
          return false;
       }
    }
    </script>
    <title>Formulaire</title>
    </head>
    <body>
    <form method="post" action="#" onsubmit="return verifForm(this)">
          <input type="radio" name="sexe" value="Mr" id="mr" onblur="verifRadio(this)" />
          <label for="mr" class="inline" id="oblig">Monsieur</label>
          <input type="radio" name="sexe" value="Mme" id="mme" onblur="verifRadio(this)" />
          <label for="mme" class="inline" id="oblig">Madame</label>
          <input type="radio" name="sexe" value="Mlle" id="mlle" onblur="verifRadio(this)" />
          <label for="mlle" class="inline" id="oblig">Mademoiselle</label> *<br><br>
          <label for="prenom" id="oblig">Prénom:</label>
          <input type="text" name="prenom" size="30" id="prenom" onblur="verifText(this)" required /> *<br><br>
          <label for="nom" id="oblig">Nom:</label>
          <input type="text" name="nom" size="30" id="nom" onblur="verifText(this)" required /> *<br><br>
          <label for="telephone">Téléphone:</label>
          <input type="text" name="telephone" size="30" id="telephone" /><br><br>
          <input type="submit" value="Valider >>" />
    </form>
    </body>
    </html>
    
    Lorsque je clique sur le bouton submit ça me colorise bien en bleu les champs input obligatoires et ça me colorise en rouge une seule label obligatoire, mais je ne pige pas pourquoi toutes mes label avec un id="oblig" ne sont pas colorisé en rouge sur un onsubmit ou sur un onblur d'un input ?

    Voyez mon erreur ?

    Merci pour votre aide.
     
  2. fobec
    fobec WRInaute discret
    Inscrit:
    10 Mai 2005
    Messages:
    189
    J'aime reçus:
    0
    Bonjour,

    de mémoire, la fonction getElementById utilise des id uniques. Plusieurs id="oblig" ne marchent pas avec getElementById.
    Les énumérations par type sont possibles avec elements.length
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Merci pour ta réponse mais mes connaissances en javascript sont très limités, je ne vois pas trop comment faire avec elements.length :(

    J'ai trouvé sur le web le code ci-dessous qui colorise en rouge les labels des champs input qui n'ont pas été rempli, ça répond en partie à ce que je souhaite faire mais le problème c'est que dans le code javascript ils utilisent le nom de "for" des labels ('firstname','lastname') je voudrais éviter cela car je vais avoir beaucoup de "for" différents, donc je ne voudrais pas que ce soit nominatif dans le javascript.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    label.black{
    color:#000;
    }
    label.red{
    color:#ff0000;
    }
    </style>
    <script type="text/javascript">
    function validate(f){
    var names=['firstname','lastname'], n, el, label, valid=true, i=0;
    	while(n=names[i++]){
    	el=f[n];
    	label=el.parentNode.getElementsByTagName('label')[0];
    		if(el.value.length<1){
    		label.className='red';
    		valid=false;
    		}
    		else{
    		label.className='black';
    		}
    	}
    return valid
    }
    </script>
    </head>
    <body>
    <form action="" onsubmit="return validate(this)">
    	<p>
    		<label class="black" for="firstname">First Name: </label>
    		<input type = "text" name = "firstname" value= "" id="firstname"/>
    	</p>
    	<p>
    		<label class="black" for="lastname">Last Name: </label>
    		<input type = "text" name = "lastname" value= "" id="lastname"/>
    	</p>
        <p>
    	    <input type="submit" value="Submit">
        </p>
    </form>
    </body>
    </html>
    
    Il faudrait donc sur le onsubmit qu'il y ai une vérification des champs obligatoires et si ces champs n'ont pas été rempli par l'internaute alors on récupère dynamiquement le "for" de la label de cet input et on change la couleur de cette label, comment faire cela en javascript ?

    Punaise ce javascript :(
     
  4. fobec
    fobec WRInaute discret
    Inscrit:
    10 Mai 2005
    Messages:
    189
    J'aime reçus:
    0
    en conservant ton 1er code, place les radio dans un div.
    En plus, l'effet 'rouge' se rapproche de celui des input

    Code:
    <html>
        <head>
            <script type="text/javascript">
                function surligne(champ, erreur)
                {
                    if(erreur)
                    {
                        champ.style.backgroundColor='#DBDBFF';
                        champ.style.color='#000000';
                    }
                    else
                    {
                        champ.style.backgroundColor='';
                        champ.style.color='';
                    }
                }
                function verifText(champ)
                {
                    if(champ.value=='')
                    {
                        surligne(champ, true);
                        return false;
                    }
                    else
                    {
                        surligne(champ, false);
                        return true;
                    }
                }
                function verifRadio(champ)
                {
                    var oRadio = document.forms[0].elements["sexe"];
                    var odiv=document.getElementById('oblig');
    
                    for(var i = 0; i < oRadio.length; i++)
                    {
                        if(oRadio[i].checked)
                        {
                            surligne(odiv,false);
                            odiv.style.borderColor='#ffffff';
                            return true;
                        }
                    }
                    surligne(odiv,true);
                    odiv.style.borderColor='red';
                    return false;
                }
                function verifForm(f)
                {
                    var radio_Ok = verifRadio(f.sexe);
                    var nom_Ok = verifText(f.nom);
                    var prenom_Ok = verifText(f.prenom);
                    if(radio_Ok && nom_Ok && prenom_Ok)
                        return true;
                    else
                    {
                        alert("Merci de bien vouloir remplir tous les champs en rouge");
                        return false;
                    }
                }
            </script>
            <title>Formulaire</title>
        </head>
        <body>
            <form method="post" action="#" onsubmit="return verifForm(this)">
                <div id="oblig" style="border:1px solid #ffffff">
                    <input type="radio" name="sexe" value="Mr" id="mr" onblur="verifRadio(this)" />
                    <label for="mr" class="inline">Monsieur</label>
                    <input type="radio" name="sexe" value="Mme" id="mme" onblur="verifRadio(this)" />
                    <label for="mme" class="inline" >Madame</label>
                    <input type="radio" name="sexe" value="Mlle" id="mlle" onblur="verifRadio(this)" />
                    <label for="mlle" class="inline">Mademoiselle</label> *<br><br>
                </div>
                <label for="prenom" id="oblig">Prénom:</label>
                <input type="text" name="prenom" size="30" id="prenom" onblur="verifText(this)" required /> *<br><br>
                <label for="nom" id="oblig">Nom:</label>
                <input type="text" name="nom" size="30" id="nom" onblur="verifText(this)" required /> *<br><br>
                <label for="telephone">Téléphone:</label>
                <input type="text" name="telephone" size="30" id="telephone" /><br><br>
                <input type="submit" value="Valider >>" />
            </form>
        </body>
    </html>
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Merci pour ta réponse.

    Ton code fonctionne très bien mais la fonction verifRadio fonctionnera pour des checkbox ayant pour nom "sexe", je vais avoir d'autres formulaires avec des checkbox qui porteront d'autres noms, comment contourner ce problème de nom pour cette fonction ?
     
  6. fobec
    fobec WRInaute discret
    Inscrit:
    10 Mai 2005
    Messages:
    189
    J'aime reçus:
    0
    les id des checkbox sont passés en variable. Dans l'exemple ci-dessous, j'ai mis 2 x une barre de checkbox pour montrer le principe

    Code:
    <html>
        <head>
            <script type="text/javascript">
                function surligne(champ, erreur)
                {
                    if(erreur)
                    {
                        champ.style.backgroundColor='#DBDBFF';
                        champ.style.color='#000000';
                    }
                    else
                    {
                        champ.style.backgroundColor='';
                        champ.style.color='';
                    }
                }
                function verifText(champ)
                {
                    if(champ.value=='')
                    {
                        surligne(champ, true);
                        return false;
                    }
                    else
                    {
                        surligne(champ, false);
                        return true;
                    }
                }
                function verifRadio(radio_id,div_id)
                {
                    var oRadio = document.forms[0].elements[radio_id];
                    var odiv=document.getElementById(div_id);
    
                    for(var i = 0; i < oRadio.length; i++)
                    {
                        if(oRadio[i].checked)
                        {
                            surligne(odiv,false);
                            odiv.style.borderColor='#ffffff';
                            return true;
                        }
                    }
                    surligne(odiv,true);
                    odiv.style.borderColor='red';
                    return false;
                }
                function verifForm(f)
                {
                    var radio_Ok = verifRadio("sexe",'oblig');
                    var radio_Ok2 = verifRadio("civilite",'testdiv');
                    var nom_Ok = verifText(f.nom);
                    var prenom_Ok = verifText(f.prenom);
                    if(radio_Ok && radio_Ok2 && nom_Ok && prenom_Ok)
                        return true;
                    else
                    {
                        alert("Merci de bien vouloir remplir tous les champs en rouge");
                        return false;
                    }
                }
            </script>
            <title>Formulaire</title>
        </head>
        <body>
            <form method="post" action="#" onsubmit="return verifForm(this)">
                <div id="oblig" style="border:1px solid #ffffff">
                    <input type="radio" name="sexe" value="Mr" id="mr" onblur="verifRadio(this)" />
                    <label for="mr" class="inline">Monsieur</label>
                    <input type="radio" name="sexe" value="Mme" id="mme" onblur="verifRadio(this)" />
                    <label for="mme" class="inline" >Madame</label>
                    <input type="radio" name="sexe" value="Mlle" id="mlle" onblur="verifRadio(this)" />
                    <label for="mlle" class="inline">Mademoiselle</label> *<br><br>
                </div>
                <label for="prenom" id="oblig">Prénom:</label>
                <input type="text" name="prenom" size="30" id="prenom" onblur="verifText(this)" required /> *<br><br>
                <label for="nom" id="oblig">Nom:</label>
                <input type="text" name="nom" size="30" id="nom" onblur="verifText(this)" required /> *<br><br>
                <label for="telephone">Téléphone:</label>
                <input type="text" name="telephone" size="30" id="telephone" /><br><br>
                <input type="submit" value="Valider >>" />
                <div id="testdiv" style="border:1px solid #ffffff">
                    <input type="radio" name="civilite" value="Mr" id="mr" onblur="verifRadio(this)" />
                    <label for="mr" class="inline">Monsieur</label>
                    <input type="radio" name="civilite" value="Mme" id="mme" onblur="verifRadio(this)" />
                    <label for="mme" class="inline" >Madame</label>
                    <input type="radio" name="civilite" value="Mlle" id="mlle" onblur="verifRadio(this)" />
                    <label for="mlle" class="inline">Mademoiselle</label> *<br><br>
                </div>
            </form>
        </body>
    </html>
     
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Alors là bravo, ça marche super bien :mrgreen:

    Merci pour ton aide précieuse.
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Est-ce qu'il existe une solution pour vérifier que tous les champs obligatoires d'un formulaire sur un onsubmit soit effectivement bien rempli (ou coché) non pas à partir du nom de ces champs mais d'une autre façon, par exemple par le biais d'une class="obligatoire" qui aurait été plaçé dans les champs obligatoires (comme ci-dessous) ?

    Code:
    <form action="" onsubmit="return validate(this)">
       <p>
          <label for="firstname">First Name: </label>
          <input type="text" name="firstname" value="" id="firstname" class="obligatoire" />
       </p>
       <p>
          <label for="lastname">Last Name: </label>
          <input type="text" name="lastname" value="" id="lastname" class="obligatoire" />
       </p>
       <p>
          <label for="phone">Phone: </label>
          <input type="text" name="phone" value="" id="phone" />
       </p>
        <p>
           <input type="submit" value="Submit">
        </p>
    </form>
    
     
  9. fobec
    fobec WRInaute discret
    Inscrit:
    10 Mai 2005
    Messages:
    189
    J'aime reçus:
    0
    avec required :wink:
    Sous Chrome et Mozilla, le test est effectué automatiquement sur les champs tagés 'required'.

    Pour l'exemple, voici comment tager les champs obligatoires et les détecter lors de la validation
    Code:
    <html>
        <head>
            <script type="text/javascript">
                function validate(xx)
            {
                var len = document.forms[0].elements.length;
                for(var i = 0; i < len; i++)
                {
                    if(document.forms[0].elements[i].type=="text"
                        && document.forms[0].elements[i].required ) {
                        alert("champs obligatoire");
                        }
                }
            }
            </script>
            <title>Formulaire</title>
        </head>
        <body>
            <form action="" onsubmit="return validate(this)">
                <p>
                    <label for="firstname">First Name: </label>
                    <input type="text" name="firstname" value="" id="firstname" required  />
                </p>
                <p>
                    <label for="lastname">Last Name: </label>
                    <input type="text" name="lastname" value="" id="lastname" required />
                </p>
                <p>
                    <label for="phone">Phone: </label>
                    <input type="text" name="phone" value="" id="phone" />
                </p>
                <p>
                    <input type="submit" value="Submit">
                </p>
            </form>
        </body>
    </html>
     
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
  11. fobec
    fobec WRInaute discret
    Inscrit:
    10 Mai 2005
    Messages:
    189
    J'aime reçus:
    0
    effectivement, l'attribut required est loin d’être compatible sur tous les navigateurs :mrgreen:
    La boucle en javascript permet de 'repecher' les navigateurs plus anciens. Le champs devient obligatoire lorsque son id contient '_obli'

    Code:
    <html>
        <head>
            <script type="text/javascript">
                function validate(xx)
                {
                    var len = document.forms[0].elements.length;
                    for(var i = 0; i < len; i++)
                    {
                        if(document.forms[0].elements[i].type=="text" &&
                            document.forms[0].elements[i].id.indexOf('_obli')>-1 ) {
                            if (document.forms[0].elements[i].value.length=='') {
                                document.forms[0].elements[i].style.backgroundColor='#DBDBFF';
                                alert('champs obligatoire');
                                return false;
                            } else {
                                document.forms[0].elements[i].style.backgroundColor='#FFFFFF'
                            }
                        }
                    }
                }
            </script>
            <title>Formulaire</title>
        </head>
        <body>
            <form action="" onsubmit="return validate(this)">
                <p>
                    <label for="firstname">First Name: </label>
                    <input type="text" name="firstname" value="" id="firstname_obli" required  />
                </p>
                <p>
                    <label for="lastname">Last Name: </label>
                    <input type="text" name="lastname" value="" id="lastname_obli" required />
                </p>
                <p>
                    <label for="phone">Phone: </label>
                    <input type="text" name="phone" value="" id="phone" />
                </p>
                <p>
                    <input type="submit" value="Submit">
                </p>
            </form>
        </body>
    </html>
     
  12. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Intéressante cette fonction validate :D

    La seule petite chose, c'est que théoriquement le id utilisé dans le input doit être le même que le id dans la balise label afin de lier les 2 balises, dans ce cas là ça va être difficile de les lier :? ....Ah moins que tu vois une astuce pour remédier à cela :D

    Est-il aussi possible de rajouter un controle dans la fonction validate pour les champs du type radio, checkbox, select et textarea ?
     
Chargement...
Similar Threads - onsubmit mettre rouge Forum Date
PHP empêcher form onsubmit si formulaire invalide Développement d'un site Web ou d'une appli mobile 29 Juin 2020
WordPress Mettre les pages catégories en NOINDEX ? Débuter en référencement 25 Août 2020
WordPress Balise title: où mettre le H1 ? Débuter en référencement 30 Mai 2020
Campagne Google Ads : mettre en veille ou réduire le budget ? AdWords 19 Avril 2020
AMP stories : quelle stratégie SEO mettre en place ? Référencement Google 12 Mars 2020
Ne pas mettre à jour forum Phpbb Administration d'un site Web 19 Février 2020
Mettre une vidéo sur plusieurs pages, pénalisant en SEO ? (duplicate) Débuter en référencement 9 Février 2020
Mettre des url canoniques dans une usine à sites déjà bien indexée ? Référencement Google 7 Février 2020
outil qui permettrait de repérer et de mettre un commentaire de façon automatique sur les sites/blog Netlinking, backlinks, liens et redirections 3 Février 2020
Mettre à jour Php Administration d'un site Web 1 Décembre 2019