Verification champs required non vide

14 septembre 2017 à 14:45:45

Bonjour,

J'ai besoin de votre aide ! Je cherche un moyen, si il existe, un tuto ou une explication me permettant de répondre au critère suivant :

J'aimerai pouvoir changer le background-color d'une div lorsque certain champs de mon Formulaire de type required sont remplit par l'utilisateur.

Concrètement j'ai un formulaire séparer en 6 catégories de couleur bleu. Chaque catégories est un gros titre, j'utilise un principe d’accordéon pour afficher / masquer mes différentes catégories. Mais ce que j'aimerai faire c'est changer le background d'une catégories lorsque les champs "required" de celle-ci sont remplit par l'utilisateur et non pas lors du click sur le submit. C'est à dire que des que l'utilisateur remplit les champs required sans appuyez sur le bouton envoyer car il y'a d'autre champ à remplir, la catégories passe de bleu à vert.

Je sais pas si je suis très clair mais je ne peux pas mettre de screen pour cause de confidentialité ...

Si vous avez des idées n'hésitez pas !

Merci d'avance !

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.

1nsan3

14 septembre 2017 à 14:51:01

Salut,

choisi l'event input qui te conviendra le mieux..(onkeyup?)

https://www.w3schools.com/js/js_events_examples.asp

-
Edité par 1nsan3 14 septembre 2017 à 14:52:57

Nicolas412

14 septembre 2017 à 15:41:22

Ce n'est pas exactement ce que je veux. Je vous ai fais un petit exemple pour mieux m'expliquer. Voici un screen de ma page test :

Le bouton pour envoyer le formulaire est plus bas ...

Imaginons l'utilisateur remplit le champ 1 qui est obligatoire alors le background bleu "informations test " deviens vert instantanément.

Idem pour le champ 3 si l'utilisateur le remplit "utilités du test" deviens vert ect...

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.

1nsan3

14 septembre 2017 à 16:32:36

Oui, donc avec un event onkeyup sur le champ associé en javascript tu change la couleur...

Nicolas412

15 septembre 2017 à 9:14:26

Rebonjour,

j'ai un problème avec le onkeyup désolé je débute dans le développement ...

J'ai réussi à rajouter un attributs css quand la personne écrit mais je n'arrive pas à mettre la condition sur plusieurs champs. Par exemple j'ai deux champs, le onkeyup s'applique bien quand je remplit un champ mais j'aimerai qu'il s'applique que lorsque j'ai remplit les deux champs.

Voici mon code test :

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myFunction() {
                var x = document.getElementById("fname").required;
                var y = document.getElementById("first").required;
                document.querySelector("#test").style.display = "none";
            }
        </script>
    </head>
    <body>

        Enter your name: <input type="text" id="fname" onkeyup="myFunction()" required>
        Enter your First name: <input type="text" id="first" onkeyup="myFunction()" required>
        <div id="test">
            <h1>JE TEST</h1>
        </div>
    </body>
</html>

J'ai également testé un if :

function myFunction() {
                if (document.getElementById("fname").required && document.getElementById("first").required) {
                    document.querySelector("#test").style.color = "red";
                } else {
                    document.querySelector("#test").style.color = "black";
                }
            }

Mais j'ai le meme problème, qu'un champ suffit pour appliqué le style...

De plus j'ai un autre problème, si j'écris dans ce champ la couleur de mon text change bien mais si j'efface elle ne revient pas à l'origine. Il existe un moyen pour le remettre à l'état d'origine ?

-
Edité par Nicolas412 15 septembre 2017 à 9:35:03

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.

Nicolas412

18 septembre 2017 à 9:10:50

Petit up

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.

cheech

18 septembre 2017 à 9:57:07

Salut,

Je pense qu'il faut tester la valeur de ton input et pas la propriété required :

function myFunction() {
                if (document.getElementById("fname").innerHTML != '' && document.getElementById("first").innerHTML != '') {
                    document.querySelector("#test").style.color = "red";
                } else {
                    document.querySelector("#test").style.color = "black";
                }
            }

-
Edité par cheech 18 septembre 2017 à 9:58:20

Nicolas412

18 septembre 2017 à 13:21:49

Merci pour ta réponse cheech mais ça ne fonctionne plus du tout si j'essaye le code que tu as mis. Peut importe le champ que je rempli ou même les deux mon id reste en noir et ne passe pas en rouge ...

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.

cheech

18 septembre 2017 à 14:01:44

Autant pour moi, il faudrait plus utiliser la propriété textContent que innerHTML:

document.getElementById("fname").textContent != ''

Que te donne un alert de document.getElementById("fname").textContent ?

-
Edité par cheech 18 septembre 2017 à 14:07:56

007julien

18 septembre 2017 à 14:57:55

Deux remarques :

En disposant un event en argument des fonctions, il serait plus facile de detecter sur quel champ l'on se trouve (et de remonter sur le titre de la rubrique avec des parentNode ou autres instructions permettant de se promener dans le DOM).

Ensuite, il ne suffit pas de détecter les champ vides mais tous ceux contenant des caractères invisibles (espaces, tabulations, retours à la ligne etc.

D'où quelque chose comme

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Test</title>
<style>
html,body{margin:0;padding:0;font-family:Georgia;background-color:#ccc;}
span {display:inline-block;width:200px;height:auto;}
.tlr{text-align:right}

</style>
</head>
<body>

   <p><span class="tlr">Enter your name : </span><span><input type="text" id="fname" onkeyup="myFunction(event)" required></span></p>
   <p><span class="tlr">Enter your First name : </span><span><input type="text" id="first" onkeyup="myFunction(event)" required></span></p>
   <div>
   	<h1 id=tst>Je test</h1>
   </div>

 <script>
            function myFunction(e) { var t=e.target;
				console.log(t.id+" "+t.value)
					 if (t.value.replace(/\s+/g,"")=="") document.getElementById("tst").innerHTML = "Entrée non valide";
					 else document.getElementById("tst").innerHTML = "Je test";
            }
        </script>
</body>
</html>

-
Edité par 007julien 18 septembre 2017 à 15:00:40

Nicolas412

18 septembre 2017 à 15:43:20

Pour commencer, merci à vous deux d'avoir pris du temps pour m'aider !

Cheech j'ai testé ce code :

function myFunction() {
                if (document.getElementById("fname").textContent != '' && document.getElementById("first").textContent != '') {
                    alert("Je fonctionne");
                } else {
                    alert("Je ne fonctionne pas");
                }
            }

dès que je remplit un champ j'ai l'alert "je ne fonctionne pas"

De même pour le code de 007julien je ne rentre pas dans mon if je ne comprend pas pourquoi ...

Voici le code js :

function myFunction(e) {
                var t = e.target;
                console.log(t.id + " " + t.value)
                if (t.value.replace(/\s+/g, "") == "")
                    alert("Je fonctionne");
                else
                    alert("Je ne fonctionne pas");
            }

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.