Pseudo-class :invalid

Bonjour,

J'ai un formulaire tout bête mais je voudrais restyler les champs qui ne sont pas validés lors du submit.
Pour ca, j'utilise la pseudo class :invalid mais du coup, il fait une vérification dès le chargement de la page et m'encadre tous mes champs required en rouge !
Peut-on faire en sorte que les champs invalides restylés ne le soient qu'au moment du submit ?

Merci de votre attention

Lulu

Bonjour.

Ce sera à gérer en JS ou en PHP je pense, mais je dirais plutôt JS.

SolidSnake a écrit :
Bonjour.
Ce sera à gérer en JS ou en PHP je pense, mais je dirais plutôt JS.

@SolidSnake : +1

J'aime bien cet article de chez HTML5 Doctor : CSS3 Pseudo-Classes and HTML5 Forms , suivre les liens, et regarder les exemples (codes sources pour le traitement simplissime des "interactions")

html5 a écrit :
Note that these will take effect as soon as the page loads, so you’ll probably want to use JavaScript to apply them only after submission, perhaps by adding a class to the form with JavaScript:

document.forms[0].addEventListener('submit', function(e) {
e.currentTarget.classList.add('submitted');
// Your fallback form validation function
});

The exact script you use will vary, but however you do it, you can use that class to style the form elements, like so:

.submitted input:invalid + label::after { content: 'X'; }

Par exemple