Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Angular Auto Validate – dziecinnie prosta walidacja formularzy

2

Walidacja formularzy w AngularJS jest moim zdaniem jednym z największych minusów tego frameworka. Ja jako programista z doświadczeniem w C# i ASP.NET MVC byłem przyzwyczajony do czegoś zupełnie innego… Tam wystarczy właściwości modelu oznaczyć odpowiednimi atrybutami i użyć odpowiedniego „helpera” na widoku, a mechanizm „jQuery unobtrusive validation” robi resztę za mnie – oczywiście przy bardziej niestandardowych walidacjach trzeba trochę więcej pracy ale i tak w porównaniu z tym co standardowo proponuje AngularJS jest to niebo a ziemia.

Dlatego też nie ma się co dziwić, że podobni do mnie szukają dla Angulara czegoś, co choć trochę usprawni proces walidacji. I oto znaleźliśmy (konkretnie kolega Jacek z mojego projektu – pozdrawiam!) – a mowa o tytułowym module Angular Auto Validate!

Walidacja formularzy za pomocą Angular Auto Validate

Jak już wspominałem, wszystko jest tutaj dziecinnie proste – aby zacząć pracę wystarczy pobrać plik z modułem i umieścić go na stronie:

<script src="files/jcs-auto-validate.min.js"></script>

Oczywiście oprócz tego pliku, musimy mieć również załączonego Angulara… Dalej już z górki – do naszego moduły musimy dodać zależność do Angular Auto Validate:

angular.module('exampleApp', ['jcs-autoValidate']);

I to wszystko – od tego momentu możemy wykonywać walidację formularzy za pomocą opisywanego modułu! Na dzień dobry mamy skonfigurowany podstawowy zestaw walidatorów wraz z komunikatami, które oczywiście możemy dowolnie zmieniać. Podobnie ma się sprawa z własnymi, niestandardowymi walidatorami. Opisywany moduł obsługuje również lokalizację komunikatów walidacji za pomocą formatu i18n. Myślę, że te wszystkie „ficzery” dobrze są przedstawione w dokumentacji tego narzędzia – jeśli zainteresował Cię ten moduł, to warto tam zajrzeć by zobaczyć pełnię jego możliwości.

Jeśli używacie Bootstrapa, a zapewne duża część z Was to robi, uzyskujecie od razu dodatkowy benefit – Angular Auto Validate wykorzystuje bowiem domyślne klasy CSS tego frameworka do wyświetlania powiadomień o błędach itp. Dodatkowo możecie sobie włączyć ikonki walidacji, w ten sposób:

angular.module('exampleApp')
        .run([
            'bootstrap3ElementModifier',
            function (bootstrap3ElementModifier) {
                bootstrap3ElementModifier.enableValidationStateIcons(true);
            }]);

Pełny, działający przykład przygotowałem dla Was w poniższym codepenie:

See the Pen EaopXv by burczu (@burczu) on CodePen.

Jak pewnie zauważyliście, pola formularza zawierają kilka standardowych walidatorów: required, min-length, max-length. Wszystkie one są standardowo obsługiwane przez Angular Auto Validate – jeśli spojrzeć w kod kontrolera to nie ma tam ani linijki walidacji. Nie trzeba nawet robić „ifologii” sprawdzającej czy model jest prawidłowy – jeśli formularz nie waliduje się, do metody submit nawet nie wejdziemy. Podobnie w kodzie HTML brak jakichkolwiek elementów związanych z walidacją – wszystko dzieje się automatycznie! Awesome! 😉

Podsumowanie

Osobiście jestem pod wrażeniem tego modułu! Kiedy zaczynaliśmy u nas w projekcie przygodę z AngularJS to właśnie automatyzacja walidacji wydawała się nam największym problemem – Angular Auto Validate w pełni zaspokaja wszelkie nasze potrzeby z tym związane. Być może rozwiąże też Wasze? 😉

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!

  • Ziomek

    Nie przesadzałbym z tą strasznością walidacji w Angularze, a też jestem zatwardziałym .NETowcem. To, że coś jest inne, nie oznacza, że jest złe.

    A swoją drogą pisanie własnych walidatorów (z dodatkowym kodem klienckim w js) w .NET akurat jest bardzo niefajne.

    • Bartłomiej Dybowski

      Po co się męczyć jak można cos zrobić prościej?