Sprawdzanie pustych pól formularza: metoda uniwersalna. Walidacja formularza w JavaScript

Składam prośbę krzyżową domena ajaxowa na swoją stronę php na serwerze. Przesyłam formularz z HTML przez ajax do mojego strona php na serwerze. Problemy z walidacją po stronie klienta.

Nie wiem, jak przeprowadzić weryfikację po stronie klienta przed przesłaniem formularza.

Formularz HTML formularz standardowy, rozmieszczenie pól wejściowych: imię, nazwisko, wiadomość.... Mój formularz HTML po stronie klienta:

var wyjście = $(.nesa"); $(dokument).ready(function())( $("#form1").submit(function (e) ( e.preventDefault(); $.ajax(( url: "http://www.example.com / form.php", crossDomain: true, //ustaw jako typ żądania między domenami: "post", dane: $("#form1").serialize(), beforeSend: funkcja())( // dodaj spinner $ („ .spinner”).append(” "); ), sukces: funkcja (dane) ( $(.nesa").html(data); alert("wysłano " + dane); ), błąd: funkcja())( wyjście.text("Wiadomość jest nie wysłano!"); ) )); )); ));

Jak przebiega walidacja? Próbuję umieścić kod w sendmailu, ale bez powodzenia. A może można użyć metody SubmitHandler?

Pomysł jest taki, że gdy użytkownik kliknie przycisk „Wyślij”, sprawdzanie zostanie uruchomione, a jeśli „wklej adres” zakończy się niepowodzeniem E-mail" Teraz, gdy kliknę przycisk przesyłania, wysyłasz dane na serwer. Chcę, aby pierwsze pola wejściowe zostały sprawdzone.

Ten formularz polega na faktycznym przesłaniu danych na serwer, ale wymaga jedynie ustalenia, jak przeprowadzić weryfikację. Gdzie umieścić weryfikację w wywołaniu ajax?

Dzięki

5 odpowiedzi

Sortowanie:

Działalność

Przed przesłaniem proszę potwierdzić formularz Żądanie AJAX. Jeśli nie ma błędu, należy wysłać żądanie ajax, w przeciwnym razie zwróć wartość false. Możesz to zrobić:

$("#form1").submit(function (e) ( e.preventDefault(); // Pobierz wartość nazwy logowania i przytnij ją var name = $.trim($("#name").val()) ; // Sprawdź, czy jest pusty z not if (name === "") ( alert("Pole tekstowe jest puste."); return false; ) ));

Można także wykonać funkcję OnKeyUp.

Po pierwsze, czy rzeczywiście używasz formularza AJAX?

Wyjaśniłeś, że ładujesz formularz przez AJAX, ale czy przesyłasz go w ten sam sposób? Wydaje mi się, że próbujesz wysłać kod HTML. Przed przesłaniem formularza możesz połączyć się ze zdarzeniem kliknięcia przycisku przesyłania. Ponieważ jednak przycisk jest dodawany do strony w czasie wykonywania, konieczne jest zarejestrowanie zdarzenia na dokumencie.

$(document).on("click", "input",function() ( // Sprawdź formularz // Dodaj komunikat o błędzie w przypadku niepowodzenia i zwróć // W przeciwnym razie wyślij formularz przez AJAX ));

Tak czy inaczej, możesz użyć zdarzenia rozmycia jQuery jako alternatywy do sprawdzenia każdego pola, gdy użytkownik przejdzie do następnego.Możesz nawet sprawdzić za każdym razem, gdy użytkownik naciśnie klawisz za pomocą keypress .

Utwórz funkcję sprawdzającą poprawność formularza zwracającego wartość prawda/fałsz. Wywołaj funkcję tuż przed $.ajax. sprawdź, czy return jest fałszywy, a następnie wróć.. patrz przykład poniżej...

If(!validateForm()) zwróć wartość false;

Zawsze sprawdzam je tuż przed wprowadzeniem ich do wywołania AJAX. Oto mój egzamin

$("#form_nieuwsbrief").bind("prześlij",funkcja())( var name = $("input").val(); var email = $("input").val(); var kontynuuj = true ; if (name=="")( $("input").css(("border":"2px jednolita czerwona")); kontynuuj = false; ) if (email=="")( $(" input ").css(("border":"2px jednolity czerwony")); kontynuuj = false; ) if(proceed == false)( $("#msg").append("Uzyskaj informacje w tych obszarach . "); setTimeout(funkcja())( $(.alert").fadeOut(400, funkcja())( $(this).usuń(); )) ;),10000); ) if(proceed = = true) ( // wykonaj wywołanie ajax

To po prostu biuletyn, który po prostu prosi o podanie imienia i nazwiska oraz adresu e-mail. Ale zasada jest taka sama. Przed wykonaniem wywołania ajax utwórz instrukcję if else ze zmienną, którą ustawisz, jeśli coś jest fałszywe. w przeciwnym razie będziesz trzymać się jego wstępnej kontroli, aby móc kontynuować.

„Ochrona głupców” to zestaw środków zapobiegających wprowadzeniu do formularza błędnych informacji. Na przykład, jeśli chcesz wprowadzić dane w polu Liczba dodatnia od 0 do 10, należy sprawdzić, czy użytkownik nie wprowadził tekstu lub liczby nie mieszczącej się w podanym zakresie, tj. liczba ta nie powinna być mniejsza od zera i większa niż dziesięć.

Dlaczego wprowadzane są nieprawidłowe informacje? Dzieje się tak głównie z trzech powodów.

Użytkownik przez przypadek popełnił błąd, np. nieuważnie przeczytał to, co miał wskazać.

Strona internetowa prosi o dane w niejednoznaczny sposób, pozostawiając użytkownika zgadującego, czego naprawdę chce. Jednak opinie programisty i użytkownika nie zawsze są zbieżne.

Jest wiele osób, które postrzegają instrukcje jako wyzwanie i starają się postępować odwrotnie. Tacy użytkownicy rozumują mniej więcej tak: „Tak, proszą mnie o podanie numeru. Co się stanie, jeśli wskażę litery?” Następnie pytają o ewidentnie błędne informacje i sprawdzają, do czego to prowadzi.

Należy rozumieć, że precyzyjne i poprawne sformułowanie, choć zmniejsza prawdopodobieństwo błędów, w żaden sposób Cię przed nimi nie chroni. Tylko środki techniczne po stronie serwera pozwalają uzyskać wymagany wynik i uniknąć wprowadzania błędnych informacji. Natomiast rewizja, czyli jak to się nazywa, walidacja po stronie klienta pozwala na szybkie sprawdzenie poprawności wprowadzonych przez użytkownika danych, bez konieczności wysyłania formularza na serwer. Oszczędza to czas użytkownika i zmniejsza obciążenie serwera. Z punktu widzenia użyteczności są to także zalety – użytkownik od razu otrzymuje informację, jakie informacje wprowadził błędnie i może poprawić swój błąd.

Pole obowiązkowe

Niektóre pola formularza muszą zostać wypełnione zanim zostaną wysłane na serwer. Dotyczy to np. formularza rejestracyjnego, gdzie wymagane jest podanie loginu i hasła. Służy do określania wymaganych pól wymagany atrybut, jak pokazano w przykładzie 1.

Przykład 1. Wymagany atrybut

HTML5 IE 10+ Cr na Fx

Pole obowiązkowe

Zaloguj sie:

Hasło:

Wymagane pola należy wypełnić przed wysłaniem formularza, w przeciwnym razie formularz nie zostanie wysłany na serwer, a przeglądarka wyświetli ostrzeżenie. Rodzaj komunikatu zależy od przeglądarki, na przykład Chrome wyświetla podpowiedź jak pokazano na rys. 1.

Ryż. 1. Wymagane pole nie jest wypełnione

Poprawność danych

Początkowo istnieją dwa pola, w których dane wprowadzone przez użytkownika są sprawdzane automatycznie. To jest adres internetowy i adres e-mail. Przeglądarka Chrome sprawdza również poprawność pola danych kalendarza, ale tylko dlatego, że nie ma interfejsu wyboru kalendarza za pomocą kliknięcia myszą. Poniższe zasady dotyczą tych elementów.

Adres internetowy ( ) musi zawierać protokół (http://, https://, ftp://).
Adres e-mail ( ) musi zawierać litery lub cyfry przed symbolem @, po nim kropkę i domenę najwyższego poziomu.

Przeglądarki mają nieco inne zasady weryfikacji danych użytkownika. Na przykład Opera zastępuje protokół http:// przed wprowadzonym tekstem automatycznie, podczas gdy inne przeglądarki oczekują tego od użytkownika. Wymagają tego Chrome i Opera adres pocztowy był sens, nie jest to wymagane w przeglądarce Firefox.

Przykład 2 przedstawia formularz z wymaganymi polami, w którym dwa pola są sprawdzane przez przeglądarkę.

Przykład 2: Poprawność danych

HTML5 IE 10+ Cr na Fx

Poprawność danych

Wypełnij formularz (wszystkie pola są wymagane)

Nazwa:

E-mail:

Strona internetowa:

Opera sprawdza element formularza tylko wtedy, gdy ma atrybut name.

Co się stanie w Operze po wprowadzeniu błędnych danych pokazano na ryc. 2.

Ryż. 2. Ostrzeżenie o błędnych danych

Szablon wejściowy

Niektórych danych nie można zaklasyfikować do jednego z typów elementów formularza, dlatego należy do tego użyć pola tekstowego. W tym przypadku wprowadza się je wg pewien standard. Zatem adres IP zawiera cztery liczby oddzielone kropką (192.168.0.1), kod pocztowy Rosja jest ograniczona do sześciu cyfr (124007), telefon zawiera numer kierunkowy i określoną liczbę cyfr, często oddzielonych łącznikiem (391 555-341-42) itp. Przeglądarka musi określić szablon wprowadzania, aby mogła sprawdzić zgodnie z nim dane wprowadzone przez użytkownika. W tym celu wykorzystywany jest atrybut wzorca, którego wartością jest wyrażenie regularne. Niektóre typowe wartości podano w tabeli. 1.

Przykład 3 prosi o wprowadzenie wartość szesnastkowa kolor (#ffcc00) i jeśli nie mieści się w tym zakresie, przeglądarka wyświetla komunikat o błędzie.

Przykład 3. Szablon wejściowy

HTML5 IE 10+ Cr na Fx

Wejście koloru

Wprowadź szesnastkową wartość koloru (musi zaczynać się od #)

Na ryc. Rysunek 3 przedstawia ostrzeżenie w przeglądarce Chrome.

Ryż. 3. Wpisane dane nie są zgodne z szablonem

Cofnięcie walidacji

Walidacja nie zawsze jest wymagana w przypadku formularza; na przykład programista może chcieć z niej skorzystać uniwersalne rozwiązanie w JavaScript i nie wymaga już podwójnego sprawdzania przez przeglądarkę. W takich przypadkach należy wyłączyć wbudowaną weryfikację. Aby to zrobić, użyj atrybutu novalidate tagu. Przykład 4 pokazuje użycie tego atrybutu.

Przykład 4: Cofnięcie walidacji

HTML5 IE 10+ Cr na Fx

atrybut novalidate

W podobnym celu wykorzystywany jest atrybut formnovalidate, który dodawany jest do przycisku wysyłania formularza, ww w tym przypadku tagować. W tym przypadku formularz z przykładu 4 będzie wyglądał następująco.

Osoby tworzące strony internetowe w pewnym momencie stają przed koniecznością sprawdzenia, czy użytkownik wypełnił pola formularza zamieszczonego na stronie. W tym celu tworzona jest swego rodzaju opcja sprawdzania pustych pól, która jest wykorzystywana w jego projektach. Jednak w każdym przypadku liczba pól, które należy sprawdzić, może być inna. Prowadzi to do tego, że utworzoną opcję weryfikacji trzeba zmieniać w zależności od konkretnych warunków i w przyszłości będziemy mieli do niej kilka modyfikacji.

Dodatkowo na jednej stronie serwisu można umieścić kilka formularzy, z których każdy będzie posiadał inną ilość wymaganych pól. W rezultacie kod będzie zawierał kilka bloków z tymi samymi funkcjami, ale różnymi warunkami, co nie zawsze jest właściwym rozwiązaniem.

W mojej praktyce też musiałem skorzystać różne warianty sprawdzenie wypełnienia pól formularza w zależności od określonych warunków. A w pliku *.js było kilka funkcji sprawdzających Różne formy, co zwiększyło objętość kodu i pogorszyło jego percepcję.

W pewnym momencie zdecydowano się napisać wersję metoda uniwersalna sprawdzanie pustych pól, które można wykorzystać w dowolnym formularzu z dowolną liczbą wymaganych pól. Niezbędne warunki Metodę tę zdeterminowała prostota i brak nieporęcznych konstrukcji. W rezultacie znaleziono metodę, która całkowicie mnie zadowoliła zarówno swoją prostotą, jak i wszechstronnością.

Istota tej metody:

W znaczniku HTML dla wymaganych pól dodawany jest atrybut danych, który jest obowiązkowym znacznikiem.

Walidacja jest przeprowadzana tylko dla tych pól, które posiadają ten atrybut.

Możliwość rozszerzenia funkcjonalności poprzez sprawdzenie wartości, określone przez użytkownika w polu.

Przykład znaczników formularza:

Nagłówek formularza nr 1 Wymagane Wymagane Wymagane Wymagane

Przykładowy kod weryfikacyjny pola:

$(.js-form-validate").submit(funkcja () ( var formularz = $(to); var pole = ; form.find("input").each(funkcja () ( pole.push(" input"); var wartość = $(this).val(), linia = $(this).closest(.some-form__line"); for(var i=0;i