Selektory#
Pseudokalsa negatywnej walidacji#
:invalid { /* deklaracje */ }Pseudoklasa :invalid reprezentuje elementy interfejsu użytkownika (wejścia), które nie mają walidującej (poprawnej) treści lub wartości, w odniesieniu do prawidłowej semantyki danych, jak określono w języku dokumentu. W sytuacji kiedy prawidłowa semantyka danych w ogóle nie ma zastosowania do elementu, to nie należy on ani do :invalid ani do :valid.
Najnowszy HTML5 podaje listę elementów bez walidacji, które będą pasowały do pseudoklasy :invalid. Ogólnie rzecz biorąc dotyczy to elementów, które są kandydatami dla ograniczającej walidacji i które nie spełniają jej ograniczenia. W przypadku elementów form i fieldset dopasowanie do pseudoklasy :invalid będzie zależne od stanu walidujących kontrolek w nich zawartych.
Trzeba wyraźnie zaznaczyć, że istnieje różnica między elementem bez ograniczeń, a więc takim, który zawsze pasuje do :valid, a elementem całkowicie pozbawionym prawidłowej semantyki danych, który nie spełnia ani :valid ani :invalid. Dla przykładu, w HTML-u element <input type="text"> domyślnie nie ma żadnych ograniczeń (jest walidujący niezależnie od wprowadzonej wartości), za to w przypadku elementu <p> pojęcie prawidłowej semantyki nie ma zastosownia, dlatego akapit nigdy nie zostanie wybrany przez omawianą pseudoklasę.
Elementom podlegającym walidacji (w zależności od jej przebiegu) aplikacje klienckie mogą przypisywać domyślne formatowanie, ale w żaden sposób nie zostało ono ustandaryzowane. Jest to szczególnie widoczne w przeglądarkach internetowych, gdzie odmienna prezentacja elementów UI zdarza się bardzo często.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
:valid {outline: 5px solid green; border: 5px solid green;}
:invalid {outline: 5px solid red; border: 5px solid red;}
fieldset {margin: 30px;}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Konto e-mail</legend>
<p><label>Imię (tylko litery 3-10): <input type="text" placeholder="Jan Kowalski" pattern="[a-zA-Z]{3,30}"></label></p>
<p><label>Wiek (tylko cyfry): <input type="number" placeholder="18"></label></p>
<p><label>Adres (zawiera @): <input type="email" placeholder="jan@example.net"></label></p>
<p><label>Strona WWW (rozpoczyna się od nazwy protokołu, np. http:): <input type="url" placeholder="http://www.example.com"></label></p>
</fieldset>
</form>
</body>
</html>Na chwilę obecną jedynie Firefox prawidłowo obsługuje pseudoklasę :invalid (ale bez sprawdzania poprawności w typie liczbowym). Chrome i IE nie uwzględniają elementów form i fieldset. Nie mam też pewności, jakie zachowanie powinno być względem elementu legend; z powyższego przykładu wynika, że element otrzymuje identyczne formatowanie, jak powiązany z nim element fieldset.