Ograniczanie wprowadzania danych za pomocą JQuery
Jeśli jest jedna rzecz, która doprowadza mnie do szaleństwa w Internecie, to wtedy, gdy formularze wejściowe pozwalają mi wprowadzić nieprawidłowe dane, tylko po to, aby wskazać błąd po tym, jak próbuję go przesłać. Wygląda na to, że połowa formularzy, które przesyłam, musi zostać uzupełniona i przesłana ponownie, ponieważ nie wpisałem wielkiej litery w moim haśle lub zrobiłem to, albo hasło może być tylko liczbowe lub inne wymaganie, o którym nikt nie wspomniał.
W jaki sposób działa mózg, szukamy rozwiązań opartych na narzędziach przed nami. Nie wpisujesz wielkich liter w bankomacie? Nie, ponieważ klawiatura ATM ma tylko cyfry. Przez pomyłkę możesz trafić niewłaściwy numer, ale nigdy nie próbowałeś wpisać swojego adresu e-mail lub nazwiska panieńskiego matki.
Na tym polega problem, używana przez Ciebie klawiatura komplikuje wprowadzanie danych online. Prawdopodobnie zawiera od 75 do 100 klawiszy, a więcej znaków jest łatwo dostępnych dzięki kombinacji wielu klawiszy. Używanie go do logowania się na Facebooku przypomina raczej wyjście na mleko w Ferrari.
Oczywiście twoja klawiatura musi mieć więcej opcji wprowadzania danych, niż wymaga tego konkretne pole formularza, ponieważ jest to narzędzie wielofunkcyjne; praktycznie nie można mieć innej klawiatury dla każdego możliwego typu danych wejściowych.
Prowadzi to do poważnego problemu z użytecznością: użytkownicy są ciągle proszeni o "poprawienie" swoich informacji, aby pasowały do formularza. To świetny sposób na zwiększenie frustracji i utratę biznesu.
Urządzenia z ekranem dotykowym zrobiły wielkie postępy w tym obszarze, modyfikując klawiaturę ekranową, aby dostosować rodzaje danych wejściowych do wymaganych danych; wprowadź adres e-mail na przykład na telefonie iPhone, a pomyłkowo nie można wprowadzić spacji, ponieważ spacja nie jest dostępna.
Cyfrowy obraz klawiatury przez Shutterstock
Dopóki wszyscy nie pracujemy na ekranach dotykowych, potrzebujemy tymczasowego rozwiązania, i jest całkiem proste: używając jQuery możemy przesuwać warstwę inteligencji między klawiaturą a polem wprowadzania danych i akceptować dane tylko wtedy, gdy mieszczą się w oczekiwanych granicach ignorując wszystko poza tymi granicami, przekonany, że to błąd.
Najpierw musimy ustawić pole wejściowe w kodzie HTML, które chcemy ograniczyć, na przykład numer telefonu:
Następnie, w dokumencie, musimy zaimportować jQuery:
I zaraz potem dodaj następujący skrypt:
Ten skrypt uruchamia się, gdy dokument jest gotowy, dołączając metodę keypress do pola wejściowego .phoneInput . Następnie wykrywamy, który klawisz został naciśnięty na podstawie jego właściwości charCode - numer 0 ma przypisany kod 48, 1 to 49 i tak dalej - każdy klucz spoza naszego zakresu powinien zwracać wartość false. Jeśli metoda zwróci wartość false, przeglądarka po prostu zignoruje naciśnięcie klawisza.
Oznacza to, że jeśli użytkownik uderzy w dowolny klawisz, który nie jest 0-9, wejście zostanie zignorowane, skutecznie ograniczając dane wejściowe do liczb.
Możemy zastosować tę samą technikę do prawie każdej dziedziny, budując złożone reguły za pomocą logicznego AND i logicznego OR. Na przykład, gdybyśmy chcieli ograniczyć dane wejściowe dla nazwiska, musielibyśmy ograniczyć wprowadzanie do małych liter (97-122), wielkich liter (65-90) i sporadycznych łączników (45):
$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});Możesz wypróbuj tutaj wersję demo .
Ten kod jest postępowym ulepszeniem. Potrwa to trochę wysiłku ze sprawdzania poprawności twojego serwera, ale to nie znaczy, że nie powinieneś również sprawdzać informacji, które zbierasz.
Zapobieganie, jak to się mówi, jest lepsze niż leczenie; i za pomocą tej wskazówki zobaczysz zmniejszenie liczby osób, które zaczynają, ale nie wypełniają formularzy, zwłaszcza gdy są zaangażowane złożone wymagania dotyczące danych.
Czy użytkownicy regularnie popełniają błędy w formularzach? Jak sobie radzisz z błędami? Daj nam znać w komentarzach.
Wyróżnione zdjęcie / miniatura: obraz klawiatury przez Shutterstock