Zrozumienie, co to jest walidacja formularzy HTML5 i pływająca etykieta danych wejściowych

Implementacja sprawdzania poprawności formularzy odgrywa kluczową rolę w zapobieganiu wrogim użytkownikom wprowadzania bezużytecznego tekstu w polach formularzy. Ogranicza również niedoświadczonych użytkowników przed błędnym wprowadzaniem błędnych informacji w formularzu.

Oczywiście nie chciałbyś zbierać niepoprawnych danych od użytkowników w niepewny sposób. Dlatego konieczne jest zdefiniowanie zasad walidacji formularzy.

Od lat używamy złożonego i TL;DR (czyli za długo; nie czytałem) kodu JavaScript do implementacji walidacji formularzy po stronie klienta. Na szczęście wraz z wydaniem „walidacji formularzy HTML5” możemy teraz dodawać walidacje do formularza z minimalnym JavaScriptem.

Chociaż najnowsza wersja HTML oferuje kilka korzyści, najważniejszą z nich jest to, że jest dostarczana z wieloma nowymi polami wejściowymi i atrybutami niezbędnymi do walidacji formularza bez konieczności pisania skomplikowanego kodu walidacyjnego JS (skrót od JavaScript).

Pamiętaj jednak, że użytkownicy mogą łatwo popaść w frustrację podczas wypełniania formularza, zwłaszcza gdy dowiedzą się, że wprowadzone przez nich dane były błędne, mogą w jeszcze większym stopniu zwiększyć ich frustrację. Ale dzięki HTML5 dodanie pływających etykiet wejściowych może sprawdzić poprawność danych formularza w tym samym czasie, gdy użytkownicy wypełniają formularz. W ten sposób użytkownicy będą od razu wiedzieć, czy popełnili jakiś błąd w polach wejściowych.

Na przykład poniżej znajduje się obraz opublikowany w Dribble przez Matta Smitha, który pokazuje, jak działa wzór pływającej etykiety po zastosowaniu do formularza:

W tym poście omówiono, jak zaimplementować zmienne etykiety wejściowe podczas dodawania walidacji do formularza HTML5.

Ale zanim zaczniesz

Większość z Was może najpierw chcieć poznać proces walidacji formularza HTML5. W końcu nie każdy z Was może mieć doświadczenie w pisaniu kodu walidacyjnego dla formularza HTML5. Możliwe też, że nie będziesz mieć wiedzy o nowo wprowadzonych polach wejściowych i atrybutach w HTML5.

Szczegółowy przegląd walidacji formularzy HTML5

Kiedy planujesz walidację formularza, zaleca się, aby najpierw rozpocząć walidację po stronie serwera. A jeśli jesteś dobrym projektantem stron internetowych, kontynuuj dodawanie walidacji po stronie klienta, aby pomóc użytkownikom uzyskać natychmiastową informację zwrotną, czy wypełniają formularz poprawnymi danymi, czy nie. Na przykład natychmiastowa informacja zwrotna dla użytkowników podczas wprowadzania danych w polu adresu e-mail pozwoli im wiedzieć, że wprowadzony adres e-mail jest prawidłowy.

Jedną ze wspaniałych funkcji HTML5 jest to, że pomaga wdrożyć weryfikację po stronie klienta bez zależności od skryptów. Zamiast tego możesz wykonać takie zadanie, używając „atrybutów walidacji” w elementach formularza. Co najważniejsze, wystarczy dodać atrybut „wymagany” dla pola wejściowego, a resztą zajmie się Twoja przeglądarka.

Oto przykład, który wyjaśni użycie wymaganego atrybutu do dodania walidacji do pola wejściowego:

[php]
Nazwa: <input type="text" name="twoje imię" wymagane>
[/php]

Powyższy wiersz kodu uświadamia przeglądarce, że pole nazwy INPUT powinno być traktowane jako obowiązkowe (tzn. nie może być puste).

Jak widać czerwony znacznik jest wyświetlany w polu tekstowym odpowiadającym polu wejściowemu „Twoje imię”. Ale gdy tylko jakiś tekst zostanie wprowadzony w polu wprowadzania nazwy, znacznik zmienia się w znacznik wskazujący, że wprowadzona wartość jest prawidłowa.

Oprócz <input type="text"> (tj. typów wprowadzania tekstu), HTML5 obsługuje teraz kilka nowych opcji wprowadzania, takich jak wyszukiwanie, e-mail, tel, data i godzina itp. W prostych słowach w HTML5 możemy napisać poniższy wiersz kodu :

[php]
<input type="text" name="email">
[/php]

na coś takiego:

[php]
<input type="email" name="email">
[/php]

Przeglądarki komputerowe będą renderować powyższy kod tak samo, jak każde standardowe pole tekstowe.

Jeszcze jedną ważną rzeczą, o której chciałbym zwrócić uwagę, jest to, że: gdy spróbujesz wprowadzić atrybuty, takie jak wymagany lub typ wejściowy = „e-mail” w demie CodePen, nawet bez żadnej treści, nadal otrzymasz błąd wiadomość po kliknięciu przycisku „WYŚLIJ” bez ważnego adresu e-mail:

W przykładzie, który omówiliśmy powyżej, widać, że przeglądarka domyślnie wyświetla komunikat o błędzie. Ale co, jeśli chcesz zastosować własną (tj. niestandardową) regułę walidacji do wartości wejściowej? Tutaj przydaje się wzór Regex.

Zrozumienie wzorców RegEx

Być może zauważyłeś wzorce podczas wpisywania adresu e-mail, takiego jak abc@a. Nie trzeba dodawać, że chciałbyś, aby użytkownicy wpisywali prawdziwy adres e-mail. A dzięki określeniu własnego wyboru wzoru, który pasuje do twoich danych, pomożesz zweryfikować wprowadzoną wartość. Na przykład możesz upewnić się, że wiadomość e-mail pasuje do wzorca zawierającego na końcu co najmniej trzy znaki. Aby to zrobić, musisz użyć „atrybutu wzorca” i wyrażeń regularnych (regEx).

RegEx to w zasadzie język używany do analizowania lub manipulowania tekstem. Najczęściej wyrażenia regularne służą do wykonywania złożonych operacji (takich jak wyszukiwanie i zamiana) w celu lepszego uformowania danych tekstowych. Obecnie można znaleźć użycie wyrażeń regularnych w prawie wszystkich językach programowania i skryptów. RegEx może być używany do walidacji danych wprowadzonych w polach formularza, poprzez wymuszenie ich na typach danych wejściowych przy użyciu atrybutu wzorca w następujący sposób:

[php]
<input id="phone" placeholder="111-111-1111" title="Tekst do przekazania wzorca numeru telefonu" wymagany wzorzec="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

Ponadto, jeśli wystąpią jakiekolwiek błędy walidacji, możesz określić atrybut tytułu wraz z błędem walidacji, aby wyświetlić komunikat oprócz „Niewłaściwy format!” używając poniższej linii kodu:

[php]
<input type="email" placeholder="E-mail" wymagany wzorzec="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="Proszę wprowadzić poprawny adres e-mail tutaj.">
[/php]

Pamiętaj, że nie musisz pisać żadnego absurdalnego wzorca dla każdego wejścia. Zamiast tego w wielu przypadkach wystarczy przypisać wymagany atrybut do określonego typu danych. Na przykład liczba powyżej 8 będzie wyglądać tak:

[php]
<input type="liczba" min="8" wymagane>
[/php]

Pamiętaj też, że nie wszystkie przeglądarki obsługują wszystkie dostępne atrybuty walidacji. Weźmy na przykład przeglądarkę Firefox, która nie jest zgodna ze wzorcem „minlength”.

Korzyści z używania walidacji formularzy HTML5

Największą zaletą wdrożenia walidacji formularzy HTML5 jest natychmiastowa informacja zwrotna. Najczęściej podczas wypełniania przez użytkownika jakiegoś pola w formularzu zostanie podświetlone pewnego rodzaju wskazanie, aby poinformować ich, czy wpisana wartość jest poprawna, czy nie.

Teraz, gdy wprowadzisz coś w polu tekstowym, kolor obramowania zmieni się na zielony w następujący sposób:

Jednak, jak widać, takie podejście ma swoje wady. Nawet po dodaniu nieprawidłowej (lub niepełnej) wartości w polu „Imię” użytkownik otrzymuje informację, że wartość jest prawidłowa. Być może pomyślisz o dodaniu :invalid:not(:empty) do kodu. Niestety taka logika nie będzie działać z przeglądarkami, ponieważ zazwyczaj uważają one, że elementy formularzy są puste.

Zastanawiasz się, co robić?

Możesz spróbować dodać nowy pseudoselektor o nazwie „:placeholder-shown” w kodzie w następujący sposób:

[php]
<formularz>
<etykieta>
<span>Imię</span>
<input type="text" pattern=".{4,}" placeholder=" " wymagany tytuł="Wprowadź co najmniej 4 znaki.">
</label>

<button>Prześlij</button>

</form>
[/php]

Jednak większość przeglądarek wydaje się nie obsługiwać funkcji pokazywania symbolu zastępczego, więc lepiej jest napisać skrypt przełączający klasę, gdy pole wejściowe jest puste lub nie. Oto kod JavaScript dla tego samego:

[php]
$('input:pusty, textarea:pusty').addClass('pusty');

$('input').keyup(function () {

if ($(this).val().trim() !== ”) {

$(this).removeClass('pusty');

} w przeciwnym razie {

$(this).addClass('pusty');

}

});
[/php]

UWAGA : Pamiętaj, aby usunąć element zastępczy z powyższego znacznika HTML.

Teraz po uruchomieniu powyższego fragmentu kodu wraz ze znacznikami HTML5 wynik będzie wyglądał następująco:

Jak widać, kolor pola tekstowego pozostaje czerwony, dopóki walidacja zastosowana do pola nie zostanie spełniona. Kliknięcie przycisku Prześlij powoduje wyświetlenie komunikatu o błędzie przy wprowadzaniu niepełnej nazwy.

Ale jak tylko użytkownik wprowadzi pełny (powyżej 3 znaków), kolor obramowania pola tekstowego zmienia się na zielony.

Jak dodać pływającą etykietę wejściową w HTML5?

A teraz omówmy podejście polegające na dodawaniu pływającej etykiety wejściowej podczas walidacji formularza HTML5. W ten sposób pomaga poprawić wygląd i styl formy. Oto znacznik HTML.

Aby zaimplementować wzorzec etykiety pływającej, musisz umieścić tag tuż pod elementem <input> w swoim znaczniku HTML:

[php]
<formularz>
<etykieta>
<input type="text" pattern=".{4,}" wymagany tytuł="Znaki nie powinny być mniejsze niż 4.">
<span>Twoje imię</span>
</label>
<etykieta>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="Wprowadź poprawny adres e-mail.">
<span>Twój e-mail</span>
</label>
<button>Prześlij</button>

</form>
[/php]

CSS będzie wyglądał mniej więcej tak:

[css]
etykieta {
pozycja: względna;
wyświetlacz: inline-block;
}
zakres etykiet {
pozycja: bezwzględna;
lewy: 20px;
góra: -2em;
rozmiar czcionki: .75em;
kursor: tekst;
kolor: #f27853;
przejście: łatwość wszystkich 150 ms;
}
Wejście {
obramowanie: 1px stałe #f2f2f2;
zarys: brak;
}
dane wejściowe:skup się {
kolor obramowania: #d9d9d9;
}
dane wejściowe: prawidłowe {
kolor obramowania: #42d142;
}
dane wejściowe:nieprawidłowe {
kolor obramowania: #ff8e7a;
}
wejście.puste {
kolor obramowania: #d9d9d9;
}
wejście.puste + rozpiętość {
góra: 50%;
transformacja: przetłumaczY(-50%);
rozmiar czcionki: 1em;
tło: brak;
kolor: #cccccc;
}
ciało {
wyświetlacz: elastyczny;
wysokość min: 100vh;
tło: #f1f1f1;
rodzina czcionek: „Lato”, bezszeryfowa;
rozmiar czcionki: 150%;
}
Formularz {
margines: auto;
}

wejście, przycisk {
dopełnienie: 15px 20px;
promień obramowania: 1px;
obramowanie: stałe 2px #bdbdbd;
}

przycisk {
kolor obramowania: #363636;
tło: #363636;
kolor: #FFFFFF;
}
[/css]

I na koniec napisz kod JavaScript:

[kod]
$('input:pusty, textarea:pusty').addClass('pusty');
$('input').keyup(function () {
if ($(this).val().trim() !== ”) {
$(this).removeClass('pusty');
} w przeciwnym razie {
$(this).addClass('pusty');
}
});
[/kod]

Wyjście:

Korzystając z pływających etykiet wejściowych w HTML5, możesz zaimplementować kilka efektów, takich jak:

• Dodaj ikony z efektem zanikania/zanikania podczas sprawdzania poprawności formularza HTML5.
• Potrząśnij danymi wejściowymi, jeśli wprowadzone dane są nieprawidłowe.
• Przyciemnij kolor danych wejściowych, gdy są wypełnione poprawnie.

Rzeczy do rozważenia

Pracując nad implementacją walidacji do formularza HTML5, musisz znać:

1. Obsługa przeglądarek : formularze HTML5 działają doskonale w nowoczesnych przeglądarkach i IE10+. Chociaż IE w wersji 9 i starsze wersje nie obsługują pseudoselektorów walidacji, które powstrzymują Cię od stylizowania formularza, nadal będą działać poprawnie.
2. Zastrzeżenie : Jedną z rzeczy, których nie możesz wykonać podczas stosowania walidacji do formularza HTML5, jest nadanie stylu wiadomościom walidacji. To dlatego, że taka funkcjonalność jest wyłączona przez przeglądarki.

Ostatnie słowa

Wdrażanie walidacji w formularzu ma kluczowe znaczenie dla dodania dodatkowej warstwy bezpieczeństwa do Twojej witryny. Dzieje się tak, ponieważ uniemożliwia nikczemnym użytkownikom dodawanie złośliwego tekstu jako wartości w polach formularza. Poza tym zapewnianie natychmiastowej informacji zwrotnej użytkownikom, gdy wprowadzają dane wejściowe do zweryfikowanego pola wejściowego formularza, pomoże zwiększyć ich doświadczenie. W końcu nie będą musieli tracić czasu na rozpoznanie, że popełnili błąd podczas wypełniania formularza. Jednak walidacja formularza za pomocą samego JavaScriptu może być trudna. Tutaj na ratunek przychodzi walidacja formularzy HTML5.

Stosując walidacje do formularza za pomocą HTML5, nie musisz pisać długich linii złożonego kodu JS. Zamiast tego możesz zaimplementować reguły walidacji formularzy przy minimalnym kodowaniu JavaScript. Co najważniejsze, w walidacji formularzy HTML5 dostępnych jest wiele nowych funkcji, takich jak pływająca etykieta wejściowa, która sprawia, że ​​formularz wygląda wspaniale, zachęcając użytkowników do przesłania formularza.