Ответ 1
Причина, почему вы можете создать пузырь ошибок с помощью div-селектора, - это ошибка в Chrome 11/12, которая должна быть исправлена в более новой версии. Есть несколько псевдоклассов для создания пузырьков ошибок в Chrome 12 (и maybee в Safari6) (:: - webkit-validation-bubble и т.д.). Вы можете найти полную структуру HTML, включая селектор псевдоэлементов и некоторые примеры стилей в следующем документе.
Обратите внимание, что это расширение webkit для проверки ограничений формы HTML5 и нестандартных. Если вы хотите использовать способ создания сообщения об ошибке во всех браузерах, поддерживающих проверку HTML5, вы должны использовать JavaScript.
Ключевым принципом этого является то, что вы должны добавить обработчик к недопустимому событию (Примечание: недопустимое событие не пузырится), а затем предотвратить взаимодействие по умолчанию. Это позволит удалить собственный пузырь ошибок браузеров, и вы сможете реализовать пользовательский настраиваемый пользовательский интерфейс во всех браузерах 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>