Automatyczna walidacja formularzy

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:

[javascript]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 );
}[/javascript]

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ć

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *