Das Styling der Hinweis auf eine HTML5-input-Feld mit Attribut required

Der Grund, warum Sie können style der Fehler Blase mit einem div-Selektor ist ein bug in Chrome 11/12, die in einer neueren version behobens. Es gibt einige pseudoclasses Stil den Fehler bubble in Chrome 12 (und maybee in Safari6) (::-webkit-validation-bubble etc.). Finden Sie die komplette HTML-Struktur einschließlich der pseudoelement-Selektoren und einige styling-Beispiele in der in folgendem Dokument.

Beachten Sie, dass dies ist ein webkit-Erweiterung, die das HTML5-Formular-constraint-Validierung und nicht-standard. Wenn Sie möchten, verwenden Sie einen Weg, um style die Fehlermeldung, die in allen HTML5-Validierung der Browser dies unterstützt, Sie haben, JavaScript zu verwenden.

Das Grundprinzip hierbei ist, dass Sie haben, um einen Ereignishandler hinzuzufügen, um die invalid-Ereignis (Hinweis: Die ungültigen Ereignis nicht Blase) und dann verhindern, dass die Standard-Interaktion. Dies wird entfernen Sie die Browser-native Fehler Blase, und Sie sind in der Lage, implementieren eine benutzerdefinierte styleable Benutzeroberfläche, die in allen HTML5-Browsern.

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

Den code oben rufen showError für ungültige Elemente, die in der aktuellen form. Wenn Sie möchten, tun Sie dies nur für die ersten ungültiges element können Sie Folgendes tun:

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

Falls Sie jQuery für Ihre Website, ich würde empfehlen, mit webshims lib. webshims lib implementiert das HTML5-constraint-Validierung in allen Browsern (einschließlich IE6) und bietet eine einfache Erweiterung für die Erstellung einer einfachen benutzerdefinierten styleable Validierung Nachricht. Der JS-code sieht wie folgt aus:

$(document).bind('firstinvalid', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

Den HTML-Struktur generiert, die von $.webshims.validityAlert.showFor sieht wie folgt aus:

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

InformationsquelleAutor der Antwort alexander farkas

Fand ich eine Möglichkeit zum deaktivieren der Tipps angezeigt werden.

Grundsätzlich fand ich Sie innerhalb eines div-element, in meinem zurückgesetzt, wenn ich das hinzufügen dieser auf die Spitze.

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

Dann die Hinweise erscheinen nicht mehr, noch den rest meines divs funktionieren.

Ich bin auch geführt, zu glauben, dass die Hinweise erscheinen außerhalb des HTML-Dokuments tag. Als styling mit html-div-hat auch keine Wirkung auf die Hinweise. Interessante Sachen.

Dies funktioniert nur in Chrome, obwohl.

InformationsquelleAutor der Antwort diggersworld