override css per la convalida del modulo html5 / popup richiesti

Come posso sovrascrivere il popup predefinito per un campo obbligatorio su un modulo HTML5?

Esempio: http://jsfiddle.net/uKZGp/ (assicurati di fare clic sul pulsante di invio per vedere il popup)

L’HTML

NOTA: è necessario visualizzarlo con un browser HTML5 come Google Chrome o FireFox.

Questo link non risolve la mia domanda ma potrebbe far pensare qualcuno fuori dagli schemi:

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

È imansible modificare lo stile di convalida solo con HTML5 / CSS3.

Fa parte del browser. L’unico attributo che ho capito di cambiare è il messaggio di errore usando questo esempio:

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

Ma, come mostrato in questo esempio: http://jsfiddle.net/trixta/qTV3g/ , puoi sovrascrivere lo stile del pannello usando jQuery. Questo non è un plug-in, è una funzionalità di base, utilizza un DOM lib chiamato Webshims e, ovviamente, alcuni CSS per lo stile dei popup.

Ho trovato questo esempio molto utile in questo post di bug intitolato Improve form validation error panel UI .

Penso che questa sia la soluzione migliore che riesci a trovare e il solo modo per sovrascrivere il pannello di errore (brutto) di base.

Saluti.

Non sono sicuro del perché, ma ::-webkit-validation-bubble-message { display: none; } ::-webkit-validation-bubble-message { display: none; } non funzionerebbe per me. Sono stato in grado di ottenere il risultato desiderato (testato in FF 19, versione di Chrome 29.0.1547.76 m) impedendo il comportamento predefinito dell’evento non valido, che non ha bolle.

  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); 

Spero che aiuti gli altri – Ho cercato ovunque questo.

Per il webkit, puoi usare ::-webkit-validation-bubble-message . Ad esempio per nasconderlo:

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

Ci sono anche:

 ::-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{} 

Aggiornamento: Chrome non consente più bolle di convalida dei moduli di stile: https://code.google.com/p/chromium/issues/detail?id=259050

Per Firefox puoi sperimentare :-moz-placeholder {} .

L’attuale convalida e-mail predefinita è attualmente una delle cose più brutte che abbia mai visto in Google design!

Convalida del modulo di tipo email di Chrome HTML5

Tuttavia sembra che sia contenuto in un div standard, quindi puoi apportare alcune modifiche ad esso, se ti ricordi di resettare questi valori.

Ho scoperto che puoi modificare lo sfondo, la dimensione del carattere e il colore, il bordo e l’ombra, in questo modo

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

Se poi li sovrascrivi per le div all’interno del tag html, alla fine viene influenzata solo la validazione.

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

Sfortunatamente alcuni degli attributi chiave che vorresti cambiare, come margin e font-weight , non possono essere modificati.

NB. Questa tecnica attualmente funziona solo per Chrome (12), ovvero non funziona per Firefox 4, Opera 11 o Safari (Win 7).

Aggiunta di una class al tipo di input. e visualizzato messaggio lì. Speranza che aiuta dopo poca personalizzazione. codice di lavoro:

 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

Capisco che questa è una domanda piuttosto vecchia ma ho trovato questa libreria che penso che questo possa essere di beneficio ad altri che lo trovano.

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