Причина, по которой вы можете стилизовать пузырь ошибок с помощью div-селектора, заключается в ошибке в Chrome 11/12, которая должна быть исправлена в более новой версии s.В Chrome 12 есть несколько псевдоклассов для стилизации пузыря ошибок (и, возможно, в Safari6) (:: - webkit-validation-bubble и т. Д.).Вы можете найти полную структуру HTML, включая селекторы псевдоэлементов и некоторые примеры стилей, в следующем документе .
Обратите внимание, что это расширение веб-набора для проверки ограничений формы HTML5 и нестандартное,Если вы хотите использовать стиль сообщения об ошибке во всех браузерах, поддерживающих проверку HTML5, вы должны использовать JavaScript.
Ключевой принцип этого заключается в том, что вам нужно добавить обработчик для события invalid(Примечание. Недопустимое событие не всплывает), а затем предотвращает взаимодействие по умолчанию.Это удалит собственный пузырь ошибок браузера, и вы сможете реализовать настраиваемый пользовательский интерфейс во всех браузерах HTML5.
//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);
Приведенный выше код вызовет 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);
Если вы используете jQuery для своего сайта, я бы рекомендовал использовать webshims lib .webshims lib реализует проверку ограничений HTML5 во всех браузерах (включая IE6) и предоставляет простое расширение для генерации простого настраиваемого настраиваемого сообщения проверки.Код JS выглядит следующим образом:
$(document).bind('firstinvalid', function(e){
$.webshims.validityAlert.showFor( e.target );
//prevent browser from showing native validation message
return false;
});
HTML-структура, сгенерированная $.webshims.validityAlert.showFor, выглядит следующим образом:
<span class="validity-alert" role="alert">
<span class="va-arrow"><span class="va-arrow-box"></span></span>
<span class="va-box">Error message of the current field</span>
</span>