Стилизация подсказки в поле ввода HTML5 с использованием обязательного атрибута

Ответ 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>

Ответ 2

вы можете создать пузырь валидации в webkit с помощью следующих псевдоселекторов:

::-webkit-validation-bubble
::-webkit-validation-bubble-top-outer-arrow
::-webkit-validation-bubble-top-inner-arrow
::-webkit-validation-bubble-message

Для браузеров Mozilla пока еще нет способа. Mozilla поддерживает x-moz-errormessage, если вы хотите изменить текст: https://developer.mozilla.org/en/HTML/element/input#section_5

Ответ 3

Я нашел способ отключить подсказки от показа.

В основном я обнаружил, что они находятся в элементе div, в моем reset, если я добавлю это в начало.

div { display: none; }
body div { display: block; }

Затем подсказки больше не отображаются, но остальные мои divs работают нормально.

Я также убежден, что подсказки появляются за пределами тега документа HTML. Поскольку стиль с html div также не влияет на подсказки. Интересный материал.

Это работает только в Chrome.

Ответ 4

Если вы имеете в виду подсказки, которые говорят о том, что Opera и Chrome используют, я боюсь, что вы не можете.