Blog webdeveloperski Patryk yarpo Jar

Automatyczna walidacja formularzy

Autor wiadomości Czerwiec 5, 2011

W poprzednim wpisie o walidacji formularzy pokazałem, jak sprawdzać dane za pomocą wyrażeń regularnych. Tym razem zaprezentuję prosty obiekt, który wykona całą pracę za nas. Jedyne co trzeba zrobić to określić w odpowiednim obiekcie, jakie pola w formularzu powinny być walidowane oraz wg jakich zasad.

Na początek

Wykorzystanie yFormValidator

yFormValidator to prosta biblioteka stworzona przeze mnie służąca do automatyzacji walidacji formularzy po stronie klienta.

Aby wykorzystać potencjał w niej drzemiący należy:

  1. załączyć bibliotekę
  2. przekazać do funkcji `yFormValidator' obiekt z odpowiednimi danymi konfiguracyjnymi.

Załóżmy, że będziemy mieli taki sam formularz (jeśli chodzi o html) jak w przykładzie z wpisu o regexpach:

  • imię i nazwisko - wymagany, dowolny niepusty ciąg znaków
  • data urodzenia - niewymagany, format [dd/mm/yyyy]
  • e-mail - wymagany, poprawny adres e-mail
  • strona www - niewymagany, ciąg znaków rozpoczynający się od "http://"

Kod HTML nic się nie zmienił (zmianie uległ JS):

<html>
<head>
    <title>Walidacja formularza RegExp</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://yarpobject.googlecode.com/svn/trunk/yFormValidator/yFormValidator.js"></script>
    <script type="text/javascript">
    // wklej tu kod z następnego listingu
    </script>
</head>
<body>
 <form action="#" id="info-form">
        Imię i nazwisko: <input type="text" name="name" id="name"/><br />
        Data urodzenia: <input type="text" name="date" id="date"/><br />
        E-mail: <input type="text" name="email" id="email"/><br />
        WWWW : <input type="text" name="www" id="www"/><br />
        <input type="submit" value="gotowe" />
    </form>
</body>
</html>

Oraz kod konfiguracji walidatora:

window.onload = function()
{
    var data = {
        // id formularza, który ma być walidowany
        form : 'info-form',

        // wywoływana gdy pole nie jest wypełnione poprawnie
        error : function(rule)
        {
            // this jest elementem DOM formularza, który nie jest poprawny
            // arguments[0] == rule to obiekt RegExp który nie została spełniona
            this.style.borderColor = 'red';
            // jeśli udałoby się w tej funkcji poprawić dane, to można zwrócić `true'
            // co da sygnał dla skryptu, że to pole jest prawidłowo wypełnione,
            // np. podanie liczby w formacie "1,23" można łatwo zamienić na "1.23",
            // po czym zwrócić `true'
            return true;
         },

        // wywolywana, gdy pole jest poprawnie wypełnione
        success : function(rule)
        {
            // this jest elementem DOM formularza, który jest poprawny
            // arguments[0] == rule to obiekt RegExp używany do walidacji
            this.style.borderColor = 'green';
            return false;
        },

        // konfiguracja walidacji dla każdego pola
        items : {
            'name' : {
                rule : 'not empty', // ma to być niepusty ciąg znaków
                required : true, // wymagany
                // nadpisuję globalną funkcję obsługi błędu
                // zasada taka sama, this elementem DOM, arguments[0] / rule RegExp
                error : function(rule) { alert(this.id + ' nieprawidłowy'); }
            },
            'date' : {
                rule : 'date', // data w formacie dd/mm/yyyy
                required : false, // niewymagany
                error : function(rule) { alert(this.id + ' nieprawidłowa'); },
                success : function(rule) { alert(this.id + ' poprawna!'); }
            },
            'email' : {
                rule : 'email',
                required : true
            },
            'site' : {
                // prócz zdefiniowanych klas, można też podać własny regExp
                rule : (/^http\:\/\//), // lub new RegExp("^http\:\/\/")
                required : false
            }
        }
    };

    yFormValidator( data );
}

Możliwe zdefiniowane we frameworku klasy:

  • 'not empty' - niepusty ciąg znaków
  • 'alphanumeric' - ciąg znaków alfanumerycznych
  • 'integer' - liczba całkowita
  • 'decimal' - liczby rzeczywiste
  • 'date' - data
  • 'email' - adres e-mail

Jako, że są to jedne z najczęstszych danych pobieranych w formularzach zostały zdefiniowane w kodzie (nadal są to wyrażenia regularne, ale nie trzeba ich samemu pisać). Jeśli uważasz, że znasz lepsze wyrażenia regularne, będę wdzięczny za info w komentarzach.

Demo:

Aktualna wersja frameworka dostępna na svn:

Warto przeczytać

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.