Validation de formulaire HTML5 par défaut ne pas afficher le message d'erreur sur le navigateur IE

Question

Le navigateur IE a une manière différente d'afficher les messages de validation html5 par défaut. Chrome ou Firefox, après avoir soumis le formulaire, affiche de jolies bulles/info-bulle avec un message d'erreur. IE souligne le champ non valide, mais le message d'erreur s'affiche uniquement lorsque le champ de survol de l'utilisateur.

Question: Existe-t-il un moyen simple de changer la façon d'afficher des messages similaires à ceux de Chrome? Est-ce basé sur des pseudo-classes ou quelque chose? Est-ce que l'un d'entre vous a eu un problème similaire?

Answer 1

Vous pouvez utiliser l'événement oninvalid.

document.getElementById('input').oninvalid = function(e) { 
    e.preventDefault(); //prevent default tooltip 
    this.style.background = '#f2dede'; //whatever 
    var elem = this.parentNode.getElementsByClassName('tooltiptext')[0]; //select tooltip element 

    //show the tooltip 
    elem.style.visibility = "visible"; 
    elem.style.opacity = "1"; 
} 

J'ai fait ce violon https://jsfiddle.net/petekeeports/0yxfj3Lr/, voir si c'est ce que vous recherchez. J'espère que cela t'aides!!