Le style de l'indice sur un HTML5 champ de saisie à l'aide attribut obligatoire

La raison pour laquelle vous pouvez définir le style de l'erreur bulle avec un div-sélecteur est un bug dans Chrome 11/12, qui devrait être fixe dans une version plus récentes. Il y a quelques pseudoclasses de style de l'erreur de la bulle en Chrome 12 (et de même dans Safari6) (::-webkit-validation de la bulle etc.). Vous pouvez trouver toute la structure HTML, y compris les pseudoelement de sélecteurs et de certains style des exemples dans le document suivant.

Remarque, que c'est un webkit extension de l'HTML5 forme de contrainte de validation et de non-standard. Si vous souhaitez utiliser un moyen de style le message d'erreur dans toutes la validation HTML5 soutenir les navigateurs, vous devez utiliser JavaScript.

Le principe clé de cette, est-ce que vous avez à ajouter un gestionnaire pour les invalides-événement (Note: Les invalides événement n'a pas de bulle) et puis d'empêcher l'interaction par défaut. Cela permettra d'éliminer les navigateurs natifs d'erreur bulle et vous êtes en mesure de mettre en œuvre une coutume styleable de l'INTERFACE utilisateur dans tous les navigateurs 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);

Le code ci-dessus va appeler showError pour tous les éléments invalides dans la forme actuelle. Si vous voulez faire cela uniquement pour le premier élément non valide, vous pouvez effectuer les opérations suivantes:

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

Dans le cas où vous êtes à l'aide de jQuery pour votre site, je vous conseille d'utiliser webshims lib. webshims lib met en œuvre le HTML5 contrainte de validation dans tous les navigateurs (y compris IE6) et donne une simple extension pour la production d'une simple coutume styleable message de validation. La JS code ressemble à ceci:

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

HTML-structure générée par $.webshims.validityAlert.showFor ressemble à ceci:

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

OriginalL'auteur alexander farkas

J'ai trouvé un moyen de le désactiver les conseils de montrer.

Fondamentalement, je trouve qu'ils sont à l'intérieur d'un élément div, dans mon reset si j'ajoute ce à le haut.

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

Alors les conseils n'apparaissent plus, mais le reste de mes divs, beau travail.

Je suis également amené à croire que les repères apparaissent à l'extérieur du document HTML de la balise. Comme le style avec html div également n'a pas d'effet sur les indices. Des choses intéressantes.

Cela ne fonctionne que sur Chrome.

OriginalL'auteur diggersworld