J'ai plusieurs formulaires, où je veux modifier la couleur de fond + la couleur de la bordure du champ de saisie chaque fois qu'un champ requis ne le remplit pas. Mon problème est que je sais comment faire cela manuellement pour chaque élément avec ID ID.
Ce dont j'ai besoin est de sélectionner automatiquement tous les éléments qui ont HTML Ceci est mon code maintenant: p> où la variable nbform est mon formulaire et aanmelding_succesvol est mon message de succès. Mon formulaire a ID Est-ce que quelqu'un sait comment faire cela? (JQuery si plus facile à mettre en œuvre aussi possible) p> EDIT: Je veux seulement que cela se produise en cliquant sur le bouton Soumettre le formulaire, mon bouton ressemble donc à: p> requis code> et s'ils sont vides, changez leur style. . P> userpanel code>. Comme vous le voyez, je peux changer le style par élément. Cependant, j'ai plusieurs pages, avec plusieurs formes, toutes avec des identifiants différents. Donc, je ne préférerais pas faire une règle pour 50 éléments différents. P> <input type="submit" value="inschrijven" onclick="showHideUserpanel()"/>
4 Réponses :
Vous pouvez utiliser CSS comme ceci:
.submitted-form input:placeholder-shown:required{
border: 1px solid red;
}
Éventuellement: entrée [requis] [valeur = '']
Juste pensé à cela aussi. Édité :)
Bonjour, je viens d'éditer mon post. Cela ne devrait se produire qu'après avoir cliqué sur le bouton (Soumettre le formulaire). Pas initialement.
J'ai vraiment remarqué que cela ne change pas correctement lorsque vous tapez quelque chose dans ..
Mise à jour de la réponse avec quelque chose qui fonctionne et traité la question mise à jour
Je pense que c'est de loin la méthode qui nécessite le moins de JS. Cela fonctionne parfaitement, cool! Merci! Une autre question: Savez-vous si vous pouvez l'utiliser avec la case à cocher: avant? Alors quelque chose comme étiquette: avant: requis {}?
Si votre étiquette vient après la case à cocher, vous pouvez faire quelque chose comme: entrée [TYPE = Cochez la case]: Obligatoire: non (: coché) + étiquette {couleur: rouge; }
Quelque chose comme ça pourrait fonctionner (je suppose que JQuery est là à cause de la balise). Si vous n'utilisez pas JQuery ici, []. SLICE.CALL ( Document.QuerySelectorallall ('[Obligatoire]')) Vous donne un tableau d'éléments HTML à utiliser AddeventListener sur.
QuerySelectorallall itérale Sélectionner tous les éléments qui ont la classe requise. Ensuite, vous pouvez vous en protéger et appliquer vos modifications.
const elements = document.querySelectorAll('.required');
elements.forEach(element => {
if (element.value === "") {
element.style.display = '#FF555526';
element.style.borderColor = '#FF5555';
} else {
...
}
});
En utilisant cela avec [Obligatoire] au lieu de .requiitée fonctionne parfaitement, merci!
aperçu de cette
jQuery p>
p>
<form id="myForm"> Voornaam: <input type="text" name="naam" value="" required /> Email: <input type="email" name="email" value="" required /> </form>
Vous aimerez peut-être envisager d'utiliser un plugin de validation, par exemple JQuery Validate