Selektory#

Pseudokalsa negatywnej walidacji#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
: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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa negatywnej walidacji (H2) Specyfikacje i inne materiały (H3)