Walidacja formularzy to kluczowy element tw\u00f3rc\u00f3w stron internetowych, pozwalaj\u0105cy upewni\u0107 si\u0119, \u017ce dane wprowadzane przez u\u017cytkownik\u00f3w s\u0105 poprawne. HTML5 dostarcza szeroki wachlarz narz\u0119dzi do walidacji, takich jak atrybuty pola input oraz mo\u017cliwo\u015b\u0107 wykorzystania wyra\u017ce\u0144 regularnych (ang. regular expressions, regex). W tym artykule om\u00f3wimy podstawy korzystania z tych narz\u0119dzi, wyja\u015bnimy ich dzia\u0142anie i zaprezentujemy praktyczne przyk\u0142ady.<\/p>\n
HTML5 wprowadzi\u0142o nowe typy i atrybuty dla element\u00f3w formularzy, kt\u00f3re upraszczaj\u0105 walidacj\u0119. Oto najwa\u017cniejsze z nich:<\/p>\n
Atrybut Je\u015bli u\u017cytkownik nie wype\u0142ni tego pola, przegl\u0105darka wy\u015bwietli odpowiedni komunikat o b\u0142\u0119dzie.<\/p>\n Okre\u015blaj\u0105 minimaln\u0105 i maksymaln\u0105 liczb\u0119 znak\u00f3w w polu tekstowym.<\/p>\n Pole Atrybut Wyra\u017cenie regularne HTML5 wprowadza nowe typy pola input, kt\u00f3re automatycznie waliduj\u0105 dane:<\/p>\n Przyk\u0142ad:<\/p>\n Je\u015bli wpisana warto\u015b\u0107 nie przypomina adresu e-mail (np. brak znaku Wyra\u017cenia regularne to pot\u0119\u017cne narz\u0119dzie do precyzyjnej walidacji danych. Poni\u017cej om\u00f3wimy podstawowe elementy ich sk\u0142adni:<\/p>\n Wyra\u017cenie Wyra\u017cenie Poni\u017cszy formularz \u0142\u0105czy om\u00f3wione elementy:<\/p>\n Walidacja formularzy w HTML5 za pomoc\u0105 atrybut\u00f3w input oraz wyra\u017ce\u0144 regularnych pozwala szybko i skutecznie sprawdza\u0107 poprawno\u015b\u0107 danych wprowadzanych przez u\u017cytkownik\u00f3w. Dzi\u0119ki wbudowanym mechanizmom, takim jak Walidacja formularzy to kluczowy element tw\u00f3rc\u00f3w stron internetowych, pozwalaj\u0105cy upewni\u0107 si\u0119, \u017ce dane wprowadzane przez u\u017cytkownik\u00f3w s\u0105 poprawne. HTML5 dostarcza szeroki wachlarz narz\u0119dzi do walidacji, takich jak atrybuty pola input oraz mo\u017cliwo\u015b\u0107 wykorzystania wyra\u017ce\u0144 regularnych (ang. regular expressions, regex). W […]<\/p>\n","protected":false},"author":1,"featured_media":137,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bez-kategorii"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=1096"}],"version-history":[{"count":1,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1096\/revisions"}],"predecessor-version":[{"id":1097,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/1096\/revisions\/1097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/137"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=1096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=1096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=1096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}required<\/code> oznacza, \u017ce pole jest obowi\u0105zkowe.<\/p>\n<input type=\"text\" name=\"username\" required><\/code><\/pre>\n2. minlength i maxlength<\/strong><\/h3>\n
<input type=\"text\" name=\"password\" minlength=\"8\" maxlength=\"20\" required><\/code><\/pre>\npassword<\/code> musi zawiera\u0107 od 8 do 20 znak\u00f3w.<\/p>\n3. pattern<\/strong><\/h3>\n
pattern<\/code> pozwala okre\u015bli\u0107 regu\u0142\u0119 walidacji za pomoc\u0105 wyra\u017cenia regularnego.<\/p>\n<input type=\"text\" name=\"postalCode\" pattern=\"\\d{2}-\\d{3}\" title=\"Wprowad\u017a kod pocztowy w formacie XX-XXX.\" required><\/code><\/pre>\n\\d{2}-\\d{3}<\/code> wymaga wpisania kodu pocztowego w polskim formacie (np. 50-123).<\/p>\n4. type<\/strong><\/h3>\n
\n
email<\/code> \u2013 weryfikuje, czy wprowadzone dane s\u0105 adresem e-mail.<\/li>\nurl<\/code> \u2013 sprawdza poprawno\u015b\u0107 adresu URL.<\/li>\nnumber<\/code> \u2013 wymaga wpisania liczby.<\/li>\ntel<\/code> \u2013 waliduje numer telefonu.<\/li>\n<\/ul>\n<input type=\"email\" name=\"userEmail\" required><\/code><\/pre>\n@<\/code>), przegl\u0105darka zg\u0142osi b\u0142\u0105d.<\/p>\nPodstawy wyra\u017ce\u0144 regularnych<\/strong><\/h2>\n
\n
\n
\\d<\/code> \u2013 dowolna cyfra (0-9).<\/li>\n\\w<\/code> \u2013 dowolny znak alfanumeryczny (litera, cyfra lub podkre\u015blenie).<\/li>\n.<\/code> \u2013 dowolny pojedynczy znak.<\/li>\n<\/ul>\n<\/li>\n\n
{n}<\/code> \u2013 dok\u0142adnie n<\/code> wyst\u0105pie\u0144.<\/li>\n{n,m}<\/code> \u2013 od n<\/code> do m<\/code> wyst\u0105pie\u0144.<\/li>\n*<\/code> \u2013 zero lub wi\u0119cej wyst\u0105pie\u0144.<\/li>\n+<\/code> \u2013 jedno lub wi\u0119cej wyst\u0105pie\u0144.<\/li>\n<\/ul>\n<\/li>\n\n
^<\/code> \u2013 pocz\u0105tek \u0142a\u0144cucha.<\/li>\n$<\/code> \u2013 koniec \u0142a\u0144cucha.<\/li>\n<\/ul>\n<\/li>\n\n
()<\/code> \u2013 grupowanie wyra\u017ce\u0144.<\/li>\n|<\/code> \u2013 alternatywa (lub).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nPrzyk\u0142ady wyra\u017ce\u0144 regularnych<\/h3>\n
\n
<input type=\"text\" pattern=\"\\d{2}-\\d{3}\" title=\"Kod pocztowy w formacie XX-XXX\" required><\/code><\/pre>\n\\d{2}-\\d{3}<\/code> akceptuje dwa znaki cyfr, my\u015blnik i trzy cyfry.<\/p>\n\n
<input type=\"text\" pattern=\"\\d{11}\" title=\"PESEL musi zawiera\u0107 11 cyfr.\" required><\/code><\/pre>\n\\d{11}<\/code> wymaga dok\u0142adnie 11 cyfr.<\/p>\n\n
<input type=\"password\" pattern=\"(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}\" title=\"Has\u0142o musi mie\u0107 co najmniej 8 znak\u00f3w, w tym jedn\u0105 wielk\u0105 liter\u0119, jedn\u0105 ma\u0142\u0105 liter\u0119 i cyfr\u0119.\" required><\/code><\/pre>\n
\n<\/div>\nPraktyczne przyk\u0142ady walidacji<\/strong><\/h2>\n
Formularz z walidacj\u0105<\/h3>\n
<form>\r\n <label for=\"email\">Adres e-mail:<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" required>\r\n\r\n <label for=\"postalCode\">Kod pocztowy:<\/label>\r\n <input type=\"text\" id=\"postalCode\" name=\"postalCode\" pattern=\"\\d{2}-\\d{3}\" title=\"Wprowad\u017a kod pocztowy w formacie XX-XXX.\" required>\r\n\r\n <label for=\"pesel\">PESEL:<\/label>\r\n <input type=\"text\" id=\"pesel\" name=\"pesel\" pattern=\"\\d{11}\" title=\"PESEL musi zawiera\u0107 11 cyfr.\" required>\r\n\r\n <label for=\"password\">Has\u0142o:<\/label>\r\n <input type=\"password\" id=\"password\" name=\"password\" pattern=\"(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}\" title=\"Has\u0142o musi mie\u0107 co najmniej 8 znak\u00f3w, w tym jedn\u0105 wielk\u0105 liter\u0119, ma\u0142\u0105 liter\u0119 i cyfr\u0119.\" required>\r\n\r\n <button type=\"submit\">Wy\u015blij<\/button>\r\n<\/form><\/code><\/pre>\nPodsumowanie<\/strong><\/h2>\n
required<\/code>, pattern<\/code> czy type<\/code>, tw\u00f3rcy stron mog\u0105 zapewni\u0107 u\u017cytkownikom intuicyjne i bezpieczne formularze. Wyra\u017cenia regularne dodaj\u0105 za\u015b elastyczno\u015b\u0107 i mo\u017cliwo\u015b\u0107 implementacji bardziej zaawansowanych regu\u0142. Opanowanie tych narz\u0119dzi to wa\u017cny krok na drodze do tworzenia profesjonalnych aplikacji internetowych.<\/p>\n","protected":false},"excerpt":{"rendered":"