Zrozumienie, czym jest walidacja formularza HTML5 i pływająca etykieta wejściowa

Implementacja walidacji formularzy odgrywa istotną rolę w zapobieganiu wrogim użytkownikom wprowadzania bełkotliwego tekstu w polach formularzy. Uniemożliwia również niedoświadczonym użytkownikom błędne wprowadzenie błędnych informacji w formularzu.

Oczywiście nie chciałbyś zbierać nieprawidłowych danych od użytkowników w niezabezpieczony sposób. Dlatego konieczne jest zdefiniowanie reguł sprawdzania poprawności formularzy.

Od lat używamy złożonego i TL;DR (tzn. Za długo; nie czytałem) kodu JavaScript do implementacji walidacji formularzy po stronie klienta. Na szczęście wraz z wydaniem „Walidacji formularza HTML5" możemy teraz dodawać walidacje do formularza przy minimalnej obsłudze JavaScript.

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 są błędne, może to jeszcze bardziej zwiększyć ich frustrację. Ale dzięki HTML5 dodanie pływających etykiet wejściowych może weryfikować dane formularza w tym samym czasie, gdy użytkownicy wypełniają formularz. W ten sposób użytkownicy będą natychmiast wiedzieć, czy nie popełnili błędu w polach wejściowych.

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

W tym poście opisano, w jaki sposób można zaimplementować zmienne etykiety wejściowe podczas dodawania sprawdzania poprawności do formularza HTML5.

Ale zanim zaczniesz

Większość z Was może najpierw chcieć poznać proces sprawdzania poprawności formularza HTML5. W końcu nie każdy z Was może mieć doświadczenie w pisaniu kodu weryfikacyjnego dla formularza HTML5. Możliwe też, że nie będziesz miał wiedzy na temat nowo wprowadzonych pól wejściowych i atrybutów w HTML5.

Szczegółowy przegląd sprawdzania poprawności formularza HTML5

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

Jedną ze wspaniałych funkcji HTML5 jest to, że pomaga wdrożyć walidację po stronie klienta bez polegania na skryptach. Możesz raczej wykonać takie zadanie, korzystając z „atrybutów walidacji” na elementach formularza. Co najważniejsze, wystarczy dodać atrybut „required” do pola wprowadzania, a resztą zajmie się Twoja przeglądarka.

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

Name: <input type="text" name="yourname" required>

Powyższy wiersz kodu informuje przeglądarkę, że pole INPUT name należy traktować jako obowiązkowe (tzn. nie może pozostać puste).

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

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

<input type="text" name="email">

w coś takiego:

<input type="email" name="email">

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

Jeszcze jedną ważną rzeczą, na którą chciałbym zwrócić uwagę, jest to, że: kiedy spróbujesz wprowadzić atrybuty, takie jak wymagane lub input type=”email” w wersji demonstracyjnej CodePen, nawet bez zawartości, nadal pojawi się błąd komunikat po kliknięciu przycisku „WYŚLIJ” bez prawidłowego 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łę sprawdzania poprawności do wartości wejściowej? Tutaj z pomocą przychodzi wzorzec Regex.

Zrozumienie wzorców RegEx

Być może zauważyłeś wzorce podczas wpisywania adresu e-mail, takie jak abc@a. Nie trzeba dodawać, że chciałbyś, aby Twoi użytkownicy wprowadzali prawdziwy adres e-mail. Określenie własnego wyboru wzorca pasującego do danych pomoże zweryfikować wprowadzoną wartość. Na przykład możesz upewnić się, że wiadomość e-mail pasuje do wzorca zawierającego trzy lub więcej znaków na końcu. 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żywane do wykonywania złożonych operacji (takich jak wyszukiwanie i zamiana) w celu lepszego formowania danych tekstowych. Obecnie można znaleźć użycie wyrażeń regularnych w prawie każdym języku programowania i skryptowym. RegEx może służyć do sprawdzania poprawności danych wprowadzonych w polach formularza, poprzez wymuszenie ich na typach danych wejściowych z wykorzystaniem atrybutu wzorca w następujący sposób:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

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

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

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ć następująco:

<input type="number" min="8" required>

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 kompatybilna ze wzorcem „minlength”.

Korzyści z używania walidacji formularzy HTML5

Największą zaletą wdrożenia walidacji formularzy HTML5 jest natychmiastowa informacja zwrotna. Przeważnie rodzaj wskazania zostanie podświetlony, gdy użytkownicy wypełnią jakieś pole w formularzu, aby poinformować ich, czy wprowadzona wartość jest poprawna, czy nie.

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

Jednak, jak widać, takie podejście ma wadę. Nawet po dodaniu nieprawidłowej (lub niepełnej) wartości w polu „Imię” użytkownik otrzymuje informację, że wartość jest poprawna. Być może możesz pomyśleć o dodaniu :invalid:not(:empty)do kodu. Niestety taka logika nie będzie działać w przypadku przeglądarek, które zwykle traktują elementy formularza jako puste.

Zastanawiasz się, co robić?

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

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Ale wydaje się, że większość przeglądarek nie obsługuje pokazywanego symbolu zastępczego, więc lepiej jest napisać skrypt przełączający klasę, gdy pole wprowadzania jest puste lub nie. Oto kod JavaScript dla tego samego:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

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

Teraz, gdy uruchomisz powyższy fragment 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 Prześlij powoduje wyświetlenie komunikatu o błędzie przy wprowadzaniu niepełnej nazwy.

Ale gdy tylko użytkownik wprowadzi całość (powyżej 3 znaków), kolor obramowania pola tekstowego zmieni 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 sprawdzania poprawności formularza HTML5. W ten sposób pomaga poprawić wygląd i styl formy. Oto znaczniki HTML.

Aby zaimplementować wzór etykiety zmiennoprzecinkowej, musisz umieścić tag bezpośrednio pod <input>elementem w znacznikach HTML:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

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

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

I na koniec napisz kod JavaScript:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Wynik:

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

• Dodaj ikony z efektem pojawiania się/zanikania podczas sprawdzania poprawności formularza HTML5.
• Potrząśnij wejściem, jeśli wprowadzone dane są nieprawidłowe.
• Przyciemniaj kolory danych wejściowych, gdy są poprawnie wypełnione.

Rzeczy do rozważenia

Pracując nad wdrożeniem walidacji do formularza HTML5, musisz znać:

1. Obsługa przeglądarki: formularze HTML5 działają w nowoczesnych przeglądarkach i IE10+ w doskonały sposób. Chociaż IE w wersji 9 i starsze wersje nie obsługują pseudoselektorów sprawdzania poprawności, co powstrzymuje cię od stylizowania formularza, ale nadal będzie działać poprawnie.
2. Zastrzeżenie: Jedną z rzeczy, których nie można wykonać podczas stosowania sprawdzania poprawności w formularzu HTML5, jest stylizowanie komunikatów sprawdzania poprawności. To dlatego, że taka funkcjonalność jest wyłączona przez przeglądarki.

Ostatnie słowa

Implementacja sprawdzania poprawności w formularzu ma kluczowe znaczenie dla dodania dodatkowej warstwy bezpieczeństwa do Twojej witryny. Dzieje się tak, ponieważ uniemożliwia nieuczciwym użytkownikom dodawanie złośliwego tekstu jako wartości w polach formularza. Poza tym natychmiastowa informacja zwrotna dla użytkowników, gdy wprowadzają dane do zweryfikowanego pola wejściowego formularza, pomoże poprawić ich wrażenia. W końcu nie będą musieli tracić czasu na uznanie, że popełnili błąd przy wypełnianiu formularza. Ale sprawdzanie poprawności formularza przy użyciu samego JavaScript może być trudne. W tym miejscu na ratunek przychodzi walidacja formularzy HTML5.

Stosując walidacje do formularza przy użyciu HTML5, nie musisz pisać długich wierszy złożonego kodu JS. Zamiast tego możesz zaimplementować reguły sprawdzania poprawności formularzy przy minimalnym kodowaniu JavaScript. Co najważniejsze, wraz z walidacją 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 przesyłania formularzy.