redéfinit css pour la validation du formulaire html5 / popup requirejs

Comment puis-je remplacer la fenêtre contextuelle par défaut pour un champ obligatoire sur un formulaire HTML5?

Exemple: http://jsfiddle.net/uKZGp/ (assurez-vous de cliquer sur le bouton «soumettre» pour voir la fenêtre contextuelle)

Le HTML

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

Ce lien ne résout pas ma question mais cela pourrait faire penser à quelqu’un:

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

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

Cela fait partie du navigateur. Le seul atsortingbut que j’ai compris pour 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/sortingxta/qTV3g/ , vous pouvez remplacer le style du panneau en utilisant jQuery. Ce n’est pas un plugin, c’est une fonctionnalité principale, utilise une librairie DOM appelée Webshims et, bien sûr, des CSS pour styler les popups.

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

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

Cordialement.

Je ne sais pas pourquoi, mais ::-webkit-validation-bubble-message { display: none; } ::-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 fait pas de bulle.

  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 ça aide les autres – je l’ai cherché partout.

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

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

La validation de messagerie par défaut actuelle est actuellement l’une des choses les plus laides que j’ai jamais vues sur Google!

Validation du formulaire de type de courrier électronique HTML5 HTML5

Cependant, il semble être contenu dans un div standard afin que vous puissiez y apporter des modifications, si vous vous rappelez de réinitialiser ces valeurs.

J’ai trouvé que vous pouvez modifier l’arrière-plan, la taille de la police et la couleur, la bordure et l’ombre, comme ça

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

Si vous écrasez ensuite ces valeurs 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 des atsortingbuts clés que vous souhaitez modifier, tels que la margin et le font-weight , ne peuvent pas être modifiés.

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

Ajout d’une classe au type d’entrée. et message affiché là-bas. Espérons que cela 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; } 
 
Invalid email

Je comprends que c’est une question assez ancienne mais j’ai trouvé cette bibliothèque que je pense que cela pourrait être bénéfique pour d’autres qui le trouvent.

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