redéfinir css pour la validation de formulaire html5 / popup requis

Question

Comment puis-je remplacer la valeur par défaut popup pour un champ obligatoire sur un formulaire HTML5?

Exemple: http://jsfiddle.net/uKZGp/ (assurez-vous que vous cliquez sur le bouton "soumettre" pour voir le popup)

Le HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

REMARQUE: Vous devez voir cela avec un HTML5 navigateur comme Google Chrome ou FireFox.

Ce lien ne résout pas ma question mais quelqu'un pourrait faire penser à l'extérieur de la boîte:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

Answer 1

Il est impossible de changer la validation de style avec seulement HTML5/CSS3.

C'est une partie du navigateur. Le seul attribut, j'ai pensé à changer est le message d'erreur en utilisant cet exemple:

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

Mais, comme le montre cet exemple : http://jsfiddle.net/trixta/qTV3g/, vous pouvez remplacer le panneau de style en utilisant jQuery. Ce n'est pas un plugin, c'est une fonctionnalité de base, utilise un DOM lib appelé Webshims et, bien sûr, un peu de CSS pour le style des fenêtres pop-up.

J'ai trouvé que par exemple très utile dans ce bug post intitulé Improve form validation error panel UI.

Je pense que c'est la meilleure solution que vous pouvez trouver et la seule façon de remplacer la base (laid) erreur du panneau.

Ce qui concerne.

Answer 2

Je ne sais pas pourquoi, mais ::-webkit-validation-bubble-message { display: none; } ne fonctionnerait pas pour moi. J'ai pu obtenir le résultat souhaité (testé dans FF 19, version Chrome 29.0.1547.76 m) en empêchant le comportement par défaut de l'événement non valide, qui ne bouillait pas.

   document.addEventListener('invalid', (function(){
      return function(e){
          //prevent the browser from showing default error bubble/ hint
          e.preventDefault();
          // optionally fire off some custom validation handler
          // myvalidationfunction();
      };
  })(), true);
 

J'espère que cela aide les autres - j'ai cherché partout pour cela.

Answer 3

Pour webkit, vous pouvez utiliser ::-webkit-validation-bubble-message . Par exemple pour le cacher:

 ::-webkit-validation-bubble-message { display: none; }
 

Il y a aussi:

 ::-webkit-validation-bubble-arrow-clipper{}
::-webkit-validation-bubble-arrow{}
::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}
 

Mise à jour: Chrome n'autorise plus le styling des bulles de validation de formulaire: https://code.google.com/p/chromium/issues/detail?id=259050.

Pour firefox, vous pouvez expérimenter avec :-moz-placeholder {} .

Answer 4

La valeur par défaut email de validation est actuellement l'un des plus laid que j'ai jamais vu de Google design!

Cependant, elle semble être contenue dans une norme div de sorte que vous pouvez faire quelques modifications pour que cela, si vous vous rappelez de puis de réinitialiser ces valeurs.

J'ai trouvé, vous pouvez modifier l'arrière-plan, la taille de police et la couleur, de la frontière et de l'ombre, comme

div {
    background: rgba(0,0,0,0.8);
    color: #333;
    font-size: 11px;
    border: 0;
    box-shadow: none;
}

Ensuite, si vous remplacer ces pour les divisions à l'intérieur de la balise html, seule la validation est en fin de compte affecté.

html div {
    background: rgba(0,0,0,1);
    color: #000;
    font-size: 12px;
}

Malheureusement, certains des attributs clés que vous souhaitez modifier, tel que margin et font-weight, ne peut pas être modifié.

NB. Cette technique fonctionne actuellement uniquement pour Chrome (12), c'est à dire pas de travail pour Firefox 4, Opera 11 ou Safari (Win 7).

Answer 5

Je viens de découvrir que, dans Chrome, il semble que vous puissiez écrire des règles CSS pour tous les éléments, comme *{color: red;} et que cela affectera également les petites fenêtres contextuelles. Ensuite, vous pouvez passer au style inversé de tous les autres éléments ...;)