input html5 hint,使用required屬性在HTML5輸入字段上設置提示樣式

13

The reason, why you can style the error bubble with a div-selector is a bug in Chrome 11/12, which should be fixed in newer versions. There are some pseudoclasses to style the error bubble in Chrome 12 (and maybee in Safari6) (::-webkit-validation-bubble etc.). You can find the full HTML structure including the pseudoelement selectors and some styling examples in the following document.

為什么你可以使用div-selector設置錯誤氣泡的原因是Chrome 11/12中的一個錯誤,應該在較新的版本中修復。有一些偽類來設置Chrome 12中的錯誤氣泡(可能還有Safari6)(:: - webkit-validation-bubble等)。您可以在以下文檔中找到完整的HTML結構,包括偽元素選擇器和一些樣式示例。

Note, that this is a webkit extension to the HTML5 form constraint validation and non-standard. If you want to use a way to style the error message in all HTML5 validation supporting browsers, you have to use JavaScript.

請注意,這是HTML5表單約束驗證和非標准的webkit擴展。如果要在所有支持HTML5驗證的瀏覽器中使用一種方法來設置錯誤消息的樣式,則必須使用JavaScript。

The key principle of this, is that you have to add a handler to the invalid-event (Note: The invalid event does not bubble) and then prevent the default interaction. This will remove the browsers native error bubble and you are able to implement a custom styleable UI in all HTML5 browsers.

這個的關鍵原則是你必須為invalid-event添加一個處理程序(注意:無效事件不會冒泡),然后阻止默認交互。這將刪除瀏覽器本機錯誤氣泡,您可以在所有HTML5瀏覽器中實現自定義樣式UI。

//Note: that we use true for useCapture, because invalid does not bubble

document.addEventListener('invalid', function(e){

//prevent the browser from showing his error bubble

e.preventDefault();

//now you can implement your own validation UI (showError is a Custom method which has to be implemented by you

showError(e.target, $.prop(e.target, 'validationMessage');

}, true);

The code above will call showError for all invalid elements in the current form. If you want to do this only for the first invalid element you can do the following:

上面的代碼將為當前表單中的所有無效元素調用showError。如果您只想為第一個無效元素執行此操作,則可以執行以下操作:

document.addEventListener('invalid', (function(){

var isFirst = true;

return function(e){

//prevent the browser from showing his error bubble

e.preventDefault();

//now you can implement your own validation UI

if(isFirst){

showError(e.target, $.prop(e.target, 'validationMessage');

//set isFirst to false

isFirst = false;

//reset isFirst to true, so user can try to submit invalid forms multiple times

setTimeout(function(){

isFirst = true;

}, 9);

}

};

})(), true);

In case you are using jQuery for your site, I would recommend using webshims lib. webshims lib implements the HTML5 constraint validation in all browsers (including IE6) and gives a simple extension for generating a simple custom styleable validation message. The JS code looks like this:

如果您為您的網站使用jQuery,我建議使用webshims lib。 webshims lib在所有瀏覽器(包括IE6)中實現HTML5約束驗證,並提供了一個簡單的擴展,用於生成簡單的自定義樣式驗證消息。 JS代碼如下所示:

$(document).bind('firstinvalid', function(e){

$.webshims.validityAlert.showFor( e.target );

//prevent browser from showing native validation message

return false;

});

The HTML-structure generated by $.webshims.validityAlert.showFor looks like this:

$ .webshims.validityAlert.showFor生成的HTML結構如下所示:

Error message of the current field