Walidacja formularza HTML5 jest bardzo prosta

Dziś chciałem Wam pokazać do czego służy atrybut pattern i jak go stosować.
Formularze, w których nie zdefiniujemy atrybutu pattern nie zgłoszą żadnego błędu przy wysyłaniu.
Możemy wpisywać w takie pola litery, cyfry i znaki specjane, czyli wszystkie dostępne symbole na klawiaturze.
Pole, który jest poniżej przyjmie wszystkie znaki jakie wpiszesz, ponieważ nie ma żadnego wzoru zdefiowanego, czyli atrybutu pattern.

<form>
  <label for="nick">Nick: </label>
    <input type="text" name="nick" placeholder="michal1">
</form>

Walidacja formularza HTML5 poprzez atrybut PATTERN

1) Poniższy formularz przyjmie wszystkie małe litery i cyfry od 0 do 9, pozostałe znaki jak ‘@’ czy duże litery i znaki specjalne !@#… wywołają błąd.

<form>
  <label for="nick">Nick: </label>
    <input type="text" name="nick" placeholder="michal1" pattern="[a-zA-Z0-9]+"  id="username" title="Podaj litery lub cyfry">
</form>

2) Długość pola PIN musi mieć 5 cyfr.

<form>
  <label for="nick">PIN: </label>
    <input type="text" name="nick" placeholder="3213" pattern="[0-9]{4}" title="Podaj 4 cyfry">
</form>

3) Kod pocztowy, np. 02-273

<form>
  <label for="nick">Kod pocztowy: </label>
    <input type="text" name="nick" placeholder="3213" pattern="[0-9]{2}\-[0-9]{3}" title="Podaj kod np. 02-273">
</form>