web-dev-qa-db-fra.com

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

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

Exemple: http://jsfiddle.net/uKZGp/ (assurez-vous de cliquer sur le bouton d'envoi pour afficher la fenêtre contextuelle)

Le HTML

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

REMARQUE: vous devez l'afficher avec un navigateur HTML5 tel que Google Chrome ou FireFox.

Ce lien ne résout pas ma question mais pourrait faire penser à autre chose: 

csshtml5popupvalidation
49
Phill Pafford

Il est impossible de changer le style de validation avec HTML5/CSS3 uniquement.

Cela fait partie du navigateur. Le seul attribut que j'ai imaginé de changer est le message d'erreur en utilisant cet exemple:

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

Mais, comme illustré dans cet exemple: http://jsfiddle.net/trixta/qTV3g/ , vous pouvez remplacer le style de panneau en utilisant jQuery. Ce n’est pas un plugin, c’est une fonctionnalité essentielle qui utilise une librairie DOM appelée Webshims et, bien sûr, du CSS pour styliser les popups.

J'ai trouvé cet exemple très utile dans cet article bug intitulé intitulé Improve form validation error panel UI.

Je pense que c'est la meilleure solution que vous pouvez trouver et le seul moyen de remplacer le panneau d'erreur de base (moche).

Cordialement.

30
Zakaria

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 de Chrome 29.0.1547.76 m) en empêchant le comportement par défaut de l'événement non valide, qui ne fait pas de bulles.

  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.

17
tengen

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 les bulles de validation de formulaire de style: https://code.google.com/p/chromium/issues/detail?id=259050

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

11
umpirsky

La validation actuelle des e-mails par défaut est l'une des choses les plus laides que j'ai jamais vues avec Google Design!

Chrome HTML5 email type form validation

Cependant, il semble qu'il soit contenu dans une variable div standard afin que vous puissiez y apporter des modifications, si vous vous souvenez de réinitialiser ensuite ces valeurs.

J'ai trouvé que vous pouviez modifier l'arrière-plan, la taille et la couleur de la police, les bordures et les ombres, etc.

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

Si vous écrasez ensuite ces éléments pour les divs dans la balise html, seule la validation est finalement affectée.

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

Malheureusement, certains attributs de clé que vous souhaitez modifier, tels que margin et font-weight, ne peuvent pas être modifiés.

NB Cette technique ne fonctionne actuellement que pour Chrome (12), c’est-à-dire que ne fonctionne pas pour Firefox 4, Opera 11 ou Safari (Win 7).

4
ajcw

Ajout d'une classe au type d'entrée. et affiché le message là-bas. Espoir qui aide après peu de personnalisation. code de travail:

document.querySelector('#frm').addEventListener('submit', e => {
  e.preventDefault();
  e.currentTarget.classList.add('submitted');
});
body {
  font-family: Helvetica, sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: #ffa500;
}
form > div {
  position: relative;
  margin-bottom: 10px;
}
.theTooltip {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: opacity, visibility;
  max-width: 250px;
  border-radius: 5px;
  background-color: rgba(0,0,0,0.7);
  padding: 15px;
  color: #fff;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate(15%, -50%);
          transform: translate(15%, -50%);
  top: 50%;
  left: auto;
  right: auto;
  bottom: auto;
  visibility: hidden;
  margin: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  z-index: 100;
}
.theTooltip:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  margin-top: -10px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(0,0,0,0.7);
}
label {
  display: inline-block;
  vertical-align: center;
}
input {
  background: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  overflow: visible;
  margin: 0;
  outline: 0;
  vertical-align: center;
  text-decoration: none;
  width: auto;
  border-radius: 3px;
  cursor: text;
  padding: 7px;
}
input:focus,
input:active {
  outline: none;
}
.submitted input:invalid {
  border: 1px solid #f00;
}
.submitted input:invalid ~ .theTooltip {
  visibility: visible;
  opacity: 1;
}
.submitted input:valid ~ .theTooltip {
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
<form id="frm" action="action">
  <div>
    <label>Email</label>
    <input type="email" required="required"/><span class="theTooltip">Invalid email</span>
  </div>
  <div>
    <button formnovalidate="formnovalidate">OK</button>
  </div>
</form>

2
Bhawna Malhotra

Je comprends qu’il s’agit d’une question plutôt ancienne, mais j’ai trouvé dans cette bibliothèque ce qui, à mon avis, pourrait être bénéfique pour d’autres.

http://afarkas.github.io/webshim/demos/index.html

0
MB34