Formulaire : onsubmit mettre en rouge les label obligatoires

P
poupilou
WRInaute passionné
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.
 
F
fobec
WRInaute discret
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
 
P
poupilou
WRInaute passionné
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 :(
 
F
fobec
WRInaute discret
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>
 
P
poupilou
WRInaute passionné
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 ?
 
F
fobec
WRInaute discret
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>
 
P
poupilou
WRInaute passionné
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>
 
F
fobec
WRInaute discret
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>
 
F
fobec
WRInaute discret
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>
 
P
poupilou
WRInaute passionné
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 ?
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Discussions similaires
S
PHP empêcher form onsubmit si formulaire invalide
Réponses
2
Affichages
3K
Snowman91
S
O
onsubmit, onclick, validation XHTML et DreamWeaver
Réponses
6
Affichages
5K
tigrou
T
E
Adsense - Pas moyen de mettre fin à certaines annonces frauduleuses
Réponses
0
Affichages
416
eldk
E
A
je sais pas trop ou mettre ce sujet
Réponses
2
Affichages
560
kartyr
K
E
Adsense devrait mettre en place une ligne téléphonique surtaxée
Réponses
7
Affichages
996
kartyr
K
WebRankInfo
Mettre son menu en fin de code et l'afficher en haut de page
Réponses
13
Affichages
1K
colonies
colonies
laurentsc
Faut-il mettre une liste des communes ?
Réponses
5
Affichages
1K
emualliug
E
laurentsc
mettre en ligne un essai sans qu'il soit indexé par les moteurs de recherche
Réponses
7
Affichages
1K
emualliug
E
N
Peut-on mettre des liens dans les titres H2 ?
Réponses
1
Affichages
1K
Furtif
Furtif
laurentsc
mettre à tout prix une balise H1 pour soigner le SEO
Réponses
23
Affichages
3K
artoflog
A
laurentsc
Mettre le nom du site internet dans toutes les balises title
Réponses
8
Affichages
2K
laurentsc
laurentsc
P
Données structurées 'person' et 'organization' à mettre sur toutes les pages du site ?
Réponses
1
Affichages
1K
emualliug
E
P
Faut-il mettre en noindex follow sa pagination ?
Réponses
1
Affichages
2K
WebRankInfo
WebRankInfo
Mazinger
Ancre pour Sommaire de page comment les mettre en forme?
Réponses
2
Affichages
1K
Mazinger
Mazinger
M
Où faut-il mettre les commandes spéciales de Google ?
Réponses
4
Affichages
960
mjaM
M
M
dans un site python (Django) ce qu'on doit mettre dans le disallow
Réponses
4
Affichages
1K
meddd
M
A
Mettre du texte entre les h2 et les h3
Réponses
11
Affichages
2K
feeline31
feeline31
Mazinger
Mettre tout les mots de son titre dans l'url?
Réponses
19
Affichages
4K
WebRankInfo
WebRankInfo
M
Impossible de mettre à jour mes articles comment faire?
Réponses
2
Affichages
2K
mavlou65
M
B
Mettre plusieurs fois les mêmes itemprop dans un itemscope
Réponses
2
Affichages
1K
Bocar
B
Haut