web-dev-qa-db-fra.com

Comment styliser les messages d'erreur de validation de formulaire HTML5 avec CSS?

Comment styliser les messages d'erreur de validation de formulaire HTML5 avec CSS?

csshtml5html5-validation
33
Kyle

Actuellement, il n’existe aucun moyen de styliser ces petites info-bulles de validation. La seule autre option, ce que j'ai choisi de faire, consiste à désactiver pour le moment la validation du navigateur et à utiliser mes propres scripts de validation côté client.

Selon cet article: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

"Le moyen le plus simple de désactiver consiste à ajouter l'attribut novalidate à votre <form>. Vous pouvez également définir formnovalidate sur vos contrôles d'envoi."

7
Ramin

Chrome fournit une apparence native pour les bulles de discussion des erreurs de validation. La bulle d'erreur est composée de quatre éléments contenant des éléments qui ne sont pas des éléments normatifs. Ces quatre éléments peuvent être stylés via des pseudo-éléments s’appliquant à différentes sections de la bulle:

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

Mise à jour: Cette méthode est obsolète.

4
Estelle

Utilisez des pseudo-sélecteurs, comme le dit easwee. Par exemple, pour que l'élément de formulaire devienne vert lorsqu'il est valide et rouge lorsqu'il n'est pas valide, procédez comme suit:

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

Si vous avez besoin d'une référence complète, allez à la référence de Mozilla.

P.S. Désolé si je fais ces réponses mal, je suis nouveau dans cette communauté.

2
Remixz

Un champ obligatoire sera invalide jusqu'à ce que la saisie correcte soit entrée. Un champ non obligatoire mais ayant une validation, tel qu'un champ URL, sera valide jusqu'à ce que le texte soit entré. 

 input:invalid { 
border:solid red;
}

pour plus d'informations http://msdn.Microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

1
GANI

Pour Google Chrome, il n'est plus possible de styler les messages de validation: https://code.google.com/p/chromium/issues/detail?id=259050

0
Udi