W naszym poprzednim tutorialu omówiliśmy jak zaimplementować podstawową walidację formularzy przy użyciu niektórych atrybutów wejściowych w HTML5 i odrobiny regexu.
-
HTML5Weryfikacja poprawności formularzy przy użyciu tylko HTML5 i RegexMonty Shokeen
W tym poradniku, dowiesz się jak użyć wtyczki jQuery do dodania walidacji formularzy do swojej strony internetowej.
Używanie wtyczki jQuery do walidacji formularzy służy wielu celom. Daje ci dodatkowe możliwości, takie jak łatwe wyświetlanie niestandardowych komunikatów o błędach i dodawanie logiki warunkowej do sprawdzania poprawności formularzy. Biblioteka walidacji może również pomóc w dodaniu walidacji do formularzy HTML z minimalnymi lub żadnymi zmianami w znacznikach. Warunki ważności mogą być również dodawane, usuwane lub modyfikowane w dowolnym momencie z łatwością.
Zaczynamy
W tym tutorialu użyjemy wtyczki jQuery Validation Plugin. Wtyczka oferuje wiele funkcji, a także pomaga zdefiniować własną logikę walidacji.
Zanim będziemy mogli zacząć używać wtyczki w naszych polach, musimy dołączyć niezbędne pliki do naszego projektu. Istnieją dwa różne pliki do dołączenia. Pierwszym z nich jest plik core, który zawiera podstawowe funkcje wtyczki, w tym wszystko od różnych metod walidacji do niektórych selektorów niestandardowych. Drugi plik zawiera dodatkowe metody sprawdzania poprawności danych wejściowych, takich jak numery kart kredytowych i numery telefonów z siedzibą w USA.
Możesz dodać te pliki do swoich projektów za pomocą menedżerów pakietów, takich jak Bower lub NPM. Możesz też po prostu bezpośrednio uzyskać link CDN do plików i dodać je do tagu script na swojej stronie internetowej. Ponieważ jest to wtyczka oparta na jQuery, będziesz musiał również dodać link do biblioteki jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
Po dodaniu tych plików, możesz rozpocząć walidację dowolnego formularza za pomocą metody validate.
Weryfikacja Twojego pierwszego formularza
Możesz zacząć używać tej wtyczki bez dokonywania znaczących zmian w swoim znaczniku. Jedyną rzeczą, którą możesz musieć zmienić jest dodanie id lub class do formularza, który chcesz zwalidować, jeśli jeszcze go nie posiada.
Tutaj znajduje się narzut podstawowego formularza, który będziemy walidować używając wtyczki jQuery validate.
<form action="" method="post"><p><label for="name">Name <span>(required, at least 3 characters)</span></label><input name="name" minlength="3" type="text" required></p><p><label for="email">E-Mail <span>(required)</span></label><input type="email" name="email" required></p><p><input class="submit" type="submit" value="SUBMIT"></p></form>
Używamy tych samych atrybutów, których używaliśmy w naszym poprzednim samouczku walidacji formularzy opartych na HTML5. Formularz nadal będzie wykonywał walidację bez dodawania przez nas jakiegokolwiek JavaScriptu. Jednakże, użycie wtyczki do walidacji pozwoli nam na pokazanie komunikatów o błędach bezpośrednio pod nieprawidłowym polem wejściowym. Będziemy również mogli stylizować błędy jakkolwiek chcemy.
Aby rozpocząć walidację formularza za pomocą tej wtyczki, po prostu dodaj następujący kod JavaScript na stronie:
$(document).ready(function() {$("#basic-form").validate();});
To jest oparte na założeniu, że już dodałeś wymagane pliki JavaScript. Dodanie tych linii JavaScript sprawi, że Twój formularz zostanie poprawnie zwalidowany i wyświetli wszystkie komunikaty o błędach. Oto działające demo.
Biblioteka stara się być jak najbardziej przyjazna dla użytkownika poprzez pokazywanie komunikatów o błędach tylko wtedy, gdy są one konieczne. Na przykład, jeśli przejdziesz przez pola nazwy i adresu e-mail bez wprowadzania żadnych informacji, nie otrzymasz żadnych komunikatów o błędach. Jednakże, jeśli spróbujesz przejść do pola email po wprowadzeniu tylko jednego znaku w polu nazwy, otrzymasz komunikat o błędzie o wprowadzeniu co najmniej trzech znaków.
Komunikaty o błędach są wstrzykiwane do DOM przy użyciu elementu label. Wszystkie one posiadają klasę error, dzięki czemu łatwo jest zastosować własną stylizację, tak jak zrobiliśmy to w naszym przykładzie. To samo dotyczy nieważnych danych wejściowych, które również otrzymują klasę error.
Opcje metody validate()
W naszym poprzednim przykładzie, po prostu wywołaliśmy metodę validate() bez przekazywania do niej żadnych opcji. Jednakże, możemy również przekazać obiekt do tej metody wraz z wieloma opcjami wewnątrz tego obiektu. Wartość tych opcji określi jak wtyczka do formularzy radzi sobie z walidacją, błędami, itp.
Jeśli chcesz, aby wtyczka ignorowała niektóre elementy podczas procesu walidacji, możesz to zrobić w prosty sposób przekazując klasę lub selektor do ignore(). Wtyczka zignoruje wszystkie elementy formularza z tym konkretnym selektorem, gdy będzie sprawdzać poprawność danych wejściowych.
Dodaj reguły walidacji dla pól wejściowych
Możesz również przekazać pewne reguły do metody validate() w celu określenia, w jaki sposób wartości wejściowe są sprawdzane. Wartość parametru rules powinna być obiektem zawierającym pary klucz-wartość. Kluczem w każdym przypadku jest nazwa elementu, który chcemy zwalidować. Wartością tego klucza jest obiekt, który zawiera zestaw reguł, które zostaną użyte do walidacji.
Możesz również dodać logikę warunkową do różnych pól, które walidujesz poprzez użycie słowa kluczowego depends i przekazanie do niego funkcji callback, która zwraca albo true albo false. Oto przykład, który używa prostych reguł do określenia sposobu walidacji danych wejściowych.
$(document).ready(function() {$("#basic-form").validate({rules: {name : {required: true,minlength: 3},age: {required: true,number: true,min: 18},email: {required: true,email: true},weight: {required: {depends: function(elem) {return $("#age").val() > 50}},number: true,min: 0}}});});
W powyższym snippecie kodu, klucze nameageemail i weight są po prostu nazwami elementów wejściowych. Każdy klucz ma obiekt jako swoją wartość, a pary klucz-wartość w obiekcie określają jak pole wejściowe będzie walidowane.
Te opcje walidacji są podobne do atrybutów, które możesz dodać w znacznikach formularza. Na przykład, ustawienie required na true spowoduje, że element będzie wymagany do przesłania formularza. Ustawienie minlength na wartość taką jak 3 zmusi użytkowników do wpisania co najmniej 3 znaków w polu tekstowym. Istnieje kilka innych wbudowanych metod walidacji, które są krótko opisane na stronie dokumentacji.
Jedną z rzeczy, na którą powinieneś zwrócić uwagę w powyższym kodzie jest użycie depends aby warunkowo uczynić wagę wymaganym polem, jeśli wiek jest powyżej 50 lat. Odbywa się to poprzez zwrócenie true w funkcji wywołania zwrotnego, jeśli wartość wprowadzona w polu wejściowym age jest większa niż 50.
Stwórz własne komunikaty o błędach
Ta wtyczka pozwala również ustawić komunikaty o błędach dla różnych reguł walidacji w formularzu. Zaczynasz od ustawienia wartości klucza messages do obiektu z parami klucz-wartość dla pól wejściowych i odpowiadających im komunikatów o błędach.
Tutaj znajduje się przykład, który wyświetli niestandardowe komunikaty o błędach dla każdego pola wejściowego.
messages : {name: {minlength: "Name should be at least 3 characters"},age: {required: "Please enter your age",number: "Please enter your age as a numerical value",min: "You must be at least 18 years old"},email: {email: "The email should be in the format: [email protected]"},weight: {required: "People with age over 50 have to enter their weight",number: "Please enter your weight as a numerical value"}}
Tak jak reguły, messages polegają na nazwie pól wejściowych. Każde z tych pól wejściowych zaakceptuje obiekt z parami klucz-wartość jako jego wartość. Kluczem w każdym przypadku jest reguła walidacji, która musi być przestrzegana. Wartość jest po prostu komunikatem o błędzie, który chcesz wyświetlić, jeśli dana reguła zostanie naruszona.
Na przykład, pole wejściowe age wywoła komunikat o błędzie required jeśli będzie puste. Jednakże, spowoduje to błąd number jeśli wprowadzisz cokolwiek innego poza liczbą w polu wejściowym.
Jedną rzeczą, którą zauważysz jest to, że wtyczka pokaże ogólny komunikat o błędzie dla reguł sprawdzania poprawności, gdzie nie dostarczyłeś niestandardowego komunikatu o błędzie. Spróbuj wypełnić różne wartości w poniższym demo, a zobaczysz, że niestandardowe i ogólne komunikaty o błędach pojawiają się zgodnie z oczekiwaniami.
Dostosowywanie wyglądu komunikatów o błędach
Są chwile, kiedy możesz chcieć dodać własne klasy do ważnych i nieważnych danych wejściowych, aby skierować je bardziej konkretnie lub dla lepszej integracji z istniejącym motywem.
Możesz zmienić klasy, które są dodawane do ważnych i nieważnych elementów wejściowych za pomocą kluczy errorClass i validClass. Może to pomóc w zapobieganiu niepożądanym kolizjom spowodowanym ponownym użyciem tej samej nazwy klasy. Domyślnie, klasa error jest przypisana do każdego nieprawidłowego elementu wejściowego i etykiety. Klasa valid jest przypisana do każdego poprawnego elementu wejściowego.
Ważne jest, aby pamiętać, że ustawienie errorClass na coś takiego jak fail-alert spowoduje usunięcie klasy error z niepoprawnych elementów. Będziesz musiał użyć errorClass: "error fail-alert", aby przypisać wiele klas do tego samego elementu. To samo dotyczy validClass.
Nie ma żadnych dodatkowych etykiet dodawanych do formularza, gdy użytkownicy wprowadzają prawidłowe dane wejściowe. Tak więc klasy z validClass są przypisane do ważnego elementu wejściowego.
Poniższy fragment kodu bazuje na poprzednim przykładzie, aby dodać niestandardowe klasy CSS i stylizację do nieważnych i ważnych elementów.
Jedyny dodatkowy kod JavaScript jest używany do przypisania klas.
$(document).ready(function() {$("#basic-form").validate({errorClass: "error fail-alert",validClass: "valid success-alert",// ... More validation code from previous example
Tutaj znajduje się CSS, którego użyjemy do zmiany wyglądu komunikatów o błędach:
label.error.fail-alert {border: 2px solid red;border-radius: 4px;line-height: 1;padding: 2px 0 6px 6px;background: #ffe6eb;}input.valid.success-alert {border: 2px solid #4CAF50;color: green;}
Oprócz dostosowywania komunikatów o błędach, dodajemy również własną stylizację do ważnych elementów wejściowych. Poniżej znajduje się demo CodePen, które pokazuje nam końcowy rezultat.
Więcej opcji do zmiany zachowania wtyczki
Możesz zapobiec walidacji pól wejściowych przez wtyczkę po naciśnięciu klawisza w górę, kliknięciu, i innych tego typu zdarzeniach ustawiając wartość onfocusoutonkeyup, lub onclick na false. Należy pamiętać, że boolean true nie jest poprawną wartością dla tych kluczy. Oznacza to w zasadzie, że jeśli chcesz, aby wtyczka zatwierdzała lub traciła ostrość na zdarzeniu key up, po prostu pozostaw te opcje nietknięte.
Masz również możliwość zmiany elementu, w którym pojawia się błąd. Domyślnie wtyczka używa elementu label do wyświetlania wszystkich komunikatów o błędach, ale możesz go zmienić na em lub dowolny inny element za pomocą klucza errorElement. Sam element błędu może być następnie zawinięty w inny element HTML używając klucza wrapper.
To są jedne z najczęstszych opcji, których prawdopodobnie użyjesz podczas walidacji formularzy. Jednakże, istnieje kilka innych opcji walidacji, które mogą się przydać jeśli chcesz zrobić coś takiego jak zmiana umiejscowienia komunikatów o błędach lub zgrupowanie ich razem.
Podsumowanie
W tym tutorialu, nauczyliśmy się jak przenieść naszą walidację formularzy na następny poziom używając wtyczki jQuery. Użycie walidacji formularzy JavaScript daje nam wiele dodatkowej kontroli nad podstawową walidacją HTML. Na przykład, możesz łatwo kontrolować jak i kiedy pojawiają się różne komunikaty o błędach, gdy dane wejściowe są wypełnione niepoprawnymi wartościami. Podobnie, możesz również określić czy plugin powinien pominąć walidację dla niektórych konkretnych elementów. Gorąco polecam zapoznanie się z dokumentacją tej wtyczki oraz z najlepszymi praktykami, jak używać jej poprawnie.
W naszym następnym tutorialu, poznasz więcej narzędzi i wtyczek opartych na JavaScript, które pomogą Ci łatwo tworzyć i walidować formularze.
A skoro już tu jesteś, sprawdź niektóre z naszych innych postów na temat formularzy JavaScript i walidacji formularzy!
-
HTML5Weryfikacja poprawności formularzy przy użyciu tylko HTML5 i RegexMonty Shokeen
-
Web DevelopmentSubmit a Form Without Page Refresh Using jQueryEric -
PHPStworzyć formularz kontaktowy w PHPMonty Shokeen -
PHPPorównanie 5 najlepszych konstruktorów formularzy PHP (i 4 darmowych skryptów)Monty Shokeen -
JavaScriptNajlepsze formularze JavaScript 2019Monty Shokeen