爲HTML5表單驗證覆蓋CSS /所需彈出窗口

Question

如何覆蓋HTML5表單上所需字段的默認彈出窗口？

例如：http://jsfiddle.net/uKZGp/（確保你點擊提交按鈕，看到彈出）

的HTML

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

注：必須使用HTML5的瀏覽器如谷歌Chrome或Firefox瀏覽本。

這個環節不解決我的問題，但它可能讓別人覺得框外：

• 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

這是不可能更改驗證風格，只有HTML5/CSS3。

它是瀏覽器的一部分。我想通了，改變的唯一屬性是使用這個例子中的錯誤消息：

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

但是，如本例所示：http://jsfiddle.net/trixta/qTV3g/，您可以通過使用jQuery的覆蓋面板風格。這不是一個插件，它是一個核心功能，使用名爲Webshims的DOM庫，當然還有一些CSS用於設計彈出窗口。

我發現這個bug post標題爲Improve form validation error panel UI非常有用的例子。

我認爲這是最好的解決方案，你可以找到和唯一的方法來覆蓋基本（醜陋）錯誤面板。

問候。

Answer 2

當前默認的電子郵件驗證是目前我見過的Google設計中最醜陋的事情之一！

但是這似乎是在標準的div這樣你就可以做出一些改變它，如果你還記得，然後重新設置這些值。

我發現你可以改變背景，字體大小和顏色，邊框和陰影，像這樣

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

如果再覆蓋這些的HTML標籤內的div，那麼只有確認是最終影響。

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

不幸的是一些你想要改變的關鍵屬性，如margin和font-weight的，不能改變。

注意：此技術目前僅適用於Chrome（12），即不適用於Firefox 4，Opera 11或Safari（Win 7）。

Answer 3

對於webkit，您可以使用::-webkit-validation-bubble-message。例如將其隱藏：

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

還有：

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

更新：鉻不允許造型表單驗證泡了：https://code.google.com/p/chromium/issues/detail?id=259050

對於Firefox，你可以用:-moz-placeholder {}實驗。

Answer 4

我不知道爲什麼，但::-webkit-validation-bubble-message { display: none; }不適合我。 我能夠通過防止無效事件的默認行爲得到期望的結果（在FF 19，Chrome版本29.0.1547.76米中測​​試）。

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

希望能幫助別人 - 我到處尋找這個。

Answer 5

我明白這是一個相當古老的問題，但我發現這個圖書館，我認爲這可能有利於其他人找到這個。

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

Answer 6

追加一類的輸入類型。並在那裏顯示消息。希望這有助於定製後。工作codepen：

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>