Sprawdź poprawność formularza za pomocą Jquery

Do wykonania tego zadania wykorzystamy bibliotekę Jquery Validation, dzięki której kod jest czystszy, bardziej zwarty i rozszerzalny. Ta technologia działa zarówno dla programistów php, jak i asp.net, ponieważ działa po stronie klienta, a nie na serwerze.
Zaczniemy od pobrania wtyczki http://jqueryvalidation.org/ oraz najnowszej wersji JQuery http://jquery.com/download/
Między etykietami
Wtyczka jquery.validation działa poprzez metody walidacji i reguły walidacji, które zdefiniujemy.
Metodą walidacji jest typ danych, na przykład numeryczne pole tekstowe i zasady walidacji Pozwalają na powiązanie elementu naszego formularza, np. w texboksie, z jedną lub kilkoma metodami walidacji.
Na przykład definiujemy pole tekstowe formularza i nazwy i przypisujemy mu id oraz wymaganą klasę, czyli wymagane obowiązkowe.

Nazwa

Po formularzu umieszczamy kod, który wykona walidację

Wynikiem próby wysłania formularza bez wpisywania czegokolwiek w polu name jest wiadomość, która domyślnie jest wymagana w języku angielskim.

Do formularza dodamy pole e-mail, a do wymaganego atrybutu przypiszemy e-mail

E-mail

W tym przypadku widzimy, że pole mail zostało zweryfikowane i mówi, że nie jest to prawidłowy e-mail.
TŁUMACZENIE KOMUNIKATÓW O BŁĘDACH
Widzieliśmy, że domyślnie walidacja jquery używa języka angielskiego, zobaczymy, jak przetłumaczyć go na hiszpański. Gdy pobierzemy wtyczkę do katalogu lokalizacyjnego, zawiera ona pliki js z komunikatami przetłumaczonymi na kilka języków, pozostaje nam tylko wybrać ten, którego potrzebujemy i do niego dodać, dlatego dodajemy
Odświeżamy sieć i obserwujemy zmiany z błędami w języku hiszpańskim

Plik językowy to po prostu tekst zawierający funkcję jquery, dlatego możemy go otworzyć i edytować, aby dostosować wiadomości.
Jeśli chcemy, aby pole nie było walidowane, nie umieścimy na nim wymaganej klasy. Ta wtyczka obsługuje różne formaty danych, takie jak maksymalna wartość, minimalna wartość, data, cyfry, sprawdzanie poprawności linków. Możemy również tworzyć reguły, takie jak pole wieku, w którym można wprowadzać tylko wartości liczbowe z przedziału od 18 do 99 lat

$ ().gotowe (funkcja () {

$ ("#formdatos"). zatwierdź ({

debugowanie: prawda,

zasady: {

wiek: {

wymagane: prawda,

cyfry: prawda,

min: 18,

maks.: 99

}

}

})

})

Wtyczka ta pozwala nam zaoszczędzić sporo czasu przy tworzeniu aplikacji internetowych i uniknąć np. pomyłek przy przechwytywaniu danych.

Reguły i metody można tworzyć z większą złożonością, a nawet wykonywać rozszerzenia za pomocą funkcji jquery, takich jak tłumaczenie lub inne, których potrzebujemyPodobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt