J'ai plusieurs formulaires, où je veux changer la couleur d'arrière-plan + la couleur de la bordure du champ de saisie chaque fois qu'un champ obligatoire n'est pas rempli. Mon problème est que je sais comment faire cela manuellement pour chaque élément avec son ID.

Ce dont j'ai besoin, c'est de sélectionner automatiquement tous les éléments qui ont html required et s'ils sont vides, de changer leur style.

Voici mon code maintenant:

function showHideUserpanel() {
    var nbform = document.getElementById("userpanel");
    var emailcheckvar = document.getElementById("emailcheck");
    var voornaamcheckvar = document.getElementById("voornaamcheck");
    var voorwaardencheckvar = document.getElementById("voorwaardencheck");
    var aanmelding_succesvol = document.getElementById("bedankt-melding");

    if (emailcheckvar.value !== '' && voornaamcheckvar.value !== '' && voorwaardencheckvar.checked == true) {
        nbform.style.display = 'none';
        aanmelding_succesvol.style.display = 'block';
    } else {
        nbform.style.display = 'block';

        if (emailcheckvar.value == '') {
            emailcheckvar.style.backgroundColor = '#FF555526';
            emailcheckvar.style.borderColor = '#FF5555';
        }

        if (voornaamcheckvar.value == '') {
            vaarnaamcheckvar.style.backgroundColor = '#FF555526';
            voornaamcheckvar.style.borderColor = '#FF5555';
        }
    }
} 

Où la variable nbform est mon formulaire et aanmelding_succesvol est mon message de réussite. Mon formulaire a l'ID userpanel. Comme vous le voyez, je peux changer le style par élément. Cependant, j'ai plusieurs pages, avec plusieurs formulaires, tous avec des identifiants différents. Je ne préférerais donc pas établir une règle pour 50 éléments différents.

Est-ce que quelqu'un sait comment faire ça? (jquery si plus simple à implémenter est également possible)

EDIT: Je veux que cela se produise uniquement en cliquant sur le bouton de soumission du formulaire, donc mon bouton ressemble à:

<input type="submit" value="inschrijven" onclick="showHideUserpanel()"/>

Ensuite, si le champ est vide, le style doit être modifié.

0
Sybrentjuh 17 juin 2020 à 12:58

4 réponses

Meilleure réponse

QuerySelectorAll va itérer sélectionner TOUS les éléments qui ont la classe requise. vous pouvez ensuite les parcourir en boucle et appliquer vos modifications.

const elements = document.querySelectorAll('.required');
elements.forEach(element => {
   if (element.value === "") {
     element.style.display = '#FF555526';
     element.style.borderColor = '#FF5555';
   } else {
     ...
   }
});
1
KKhanye 17 juin 2020 à 10:20

Vous pouvez utiliser CSS comme ceci:

input[value='']:required{
  border: 1px solid red;
}

Il doit correspondre aux entrées requises avec l'attribut value étant une chaîne vide.

Vous devriez probablement rendre le sélecteur un peu plus spécifique si vous ne voulez pas que cela prenne effet sur chaque entrée.

Edit: En fait, la méthode ci-dessus semble conserver la bordure rouge après avoir tapé la valeur.

Une approche différente consisterait alors à utiliser le sélecteur ": placeholder-shown".

input:placeholder-shown:required{
     border: 1px solid red;
}

Remarque: cela ne fonctionne que si vous avez réellement défini des espaces réservés sur vos entrées.

De plus, si vous souhaitez que cela ne se produise qu'après l'envoi du formulaire, vous pouvez ajouter une classe au formulaire (ou un wrapper autour de tous les champs) comme "submit-form", puis spécifier un peu plus le sélecteur:

.submitted-form input:placeholder-shown:required{
  border: 1px solid red;
}
1
Ezenhis 17 juin 2020 à 10:16

Quelque chose comme ça pourrait fonctionner (je suppose que jQuery est là à cause de la balise).

$('[required]').on('change', function(){
    if(typeof this.checked !== 'undefined' && !this.checked) {
        // required checkbox is not checked, set the style here
    }
    else if(!this.value) {
        // required text field is not filled, set the style here
    }
})

Si vous n'utilisez pas jQuery ici, [].slice.call(document.querySelectorAll('[required]')) vous donne un tableau d'éléments HTML sur lesquels utiliser addEventListener.

0
Ivan Kashtanov 17 juin 2020 à 10:06

Jetez un oeil à ceci

JQuery

$(function() {
  $("#myForm [required]").each(function() {
    $(this).on("input change blur", function() {
      $(this).toggleClass("invalid", this.value === "")
    })
  })
})
.invalid {
  background-color: yellow;
  border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  Voornaam: <input type="text" name="naam" value="" required /> Email: <input type="email" name="email" value="" required />
</form>

Vanille

const check = e => {
  const tgt = e.target;
  tgt.classList.toggle("invalid", tgt.value === "")
};
window.addEventListener("load", function() {
  [...document.querySelectorAll("#myForm [required]")].forEach(elem => {
    elem.addEventListener("input", check);
    elem.addEventListener("change", check);
    elem.addEventListener("blur", check);
  })
})
.invalid {
  background-color: yellow;
  border-color: red;
}
<form id="myForm">
  Voornaam: <input type="text" name="naam" value="" required /> Email: <input type="email" name="email" value="" required />
</form>
0
mplungjan 17 juin 2020 à 10:26