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>