:invalid
========

La pseudo-classe **`:invalid`** cible tout élément `<input>` pour lequel la validation (en-US) du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.


```css
/\* Cible n'importe quel élément input \*/
/\* dont la valeur ne satisfait pas aux \*/
/\* critères de validation \*/
input:invalid {
  background-color: pink;
}
```

Syntaxe
-------

Error: could not find syntax for this itemExemple
-------

Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.

### CSS


```css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

### HTML


```html
<form>
  <div class="field">
    <label for="url\_input">Veuillez saisir une URL :</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Veuillez saisir une adresse électronique :</label>
    <input type="email" id="email\_input" required />
  </div>
</form>
```

### Résultat

Accessibilité
-------------

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

* Explications des recommendations WCAG 1.4
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Notes
-----

### Boutons radio

Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut `name`) possède l'attribut `required` , la pseudo-classe `:invalid` est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.

### Gestion dans Gecko

Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe `:invalid` . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété `box-shadow`) via la pseudo-classe `:-moz-ui-invalid`, qui s'applique dans un sous-ensemble des cas de `:invalid`.

Ce halo peut être désactivé avec les règles suivantes :


```css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `:valid`
* `:-moz-submit-invalid` et `:-moz-ui-invalid`
* `:required`
* `:optional`
* La validation des données d'un formulaire
* Accéder à l'état de validité en JavaScript (en-US)