jQuery: walidacja danych w formularzu cz. II

Autor: Arkadiusz Tobiasz 17 sierpnia 2011

Trochę czasu minęło odkąd wspomniałem o pluginie Validate do jQuery. Jako, że zapowiedziałem kontynuację tematu, to słowa dotrzymuje. W tym wpisie spróbuje pokazać Wam w jaki sposób napisać własne metody sprawdzające pola w formularzu.

Polska Data

Na pierwszy rzut pójdzie sprawdzanie poprawności daty w polskim formacie, tzn. dd-mm-yyyy. W tym celu będziemy modyfikować plik pluginu jquery.validate.js

Rozpoczniemy od dodania stosownego komunikatu, w sytuacji, gdy uzupełnione pole nie pasuje do formatu naszej daty. Szukamy:

1
dateISO: "Please enter a valid date (ISO).",

i po dodajemy:

1
datePL: "Please enter a valid date.",

Teraz musimy zdefiniować naszą nową regułę, więc szukamy:

1
dateISO: {dateISO: true},

i po dodajemy:

1
datePL: {datePL: true},

Następnie szukamy:

1
2
3
4
// http://docs.jquery.com/Plugins/Validation/Methods/dateISO
    dateISO: function(value, element) {
    return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
},

i po dodajemy:

1
2
3
4
// data po polsku 31-10-1986
datePL: function(value, element) {
     return this.optional(element) || /^\d{1,2}[\/-]\d{1,2}[\/-]\d{4}$/.test(value);
},

To wszystko 🙂 Aby skorzystać z naszej nowej reguły, musimy do sprawdzanego pola w formularzu dodać regułę datePL: true:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
  $("#form1").validate({
    submitHandler:function(form) {
      SubmittingForm();
    },
    rules: {
      birthdate: {
        required: true,
        date: true
      }
    }
  });
});

Sprawdzanie wieku

Mamy już sprawdzanie daty urodzenia, ale chcemy aby np. rejestrować się mogły osoby tylko powyżej 18 roku życia. W tym celu dodajemy kolejną regułę. Podaje poniżej trzy fragmenty kodu, które należy wstawić dokładnie w tych samych miejscach, które podałem powyżej.

1
date: "Please enter a valid date.",
1
adult: {adult: true},
1
2
3
4
5
6
7
8
9
10
11
// sprawdzanie czy uzytkownik ma osiemnascie lat
adult: function(value, element) {
  value = value.split("-");
  var age = 18;
  var dob = new Date();
  dob.setFullYear(value[2],value[1]-1, value[0]);
  var currdate = new Date();
  currdate.setFullYear(currdate.getFullYear() - age);

  return (currdate - dob) >= 0;
},

Sposób użycia jest analogiczny do opisanego powyżej, czyli dodajemy regułę adult: true

Znaki alfanumeryczne

Chcemy ograniczyć możliwość wpisania do danego pola tylko znaków alfanumerycznych. Poniższe fragmenty kodu znów wstawiamy w miejscach opisanych powyżej:

1
2
3
4
// znaki alfanumeryczne
alphanumeric: function(value, element) {
  return this.optional(element) || /^[\w]+$/.test(value);
},

Jeżeli chcemy dodać do znaków alfanumerycznych jeszcze myślnik i podkreślenie, to powyższy kod zastępujemy:

1
alphanumeric: "Letters or numbers only please.",
1
alphanumeric: {alphanumeric: true},
1
2
3
4
// znaki alfanumeryczne
alphanumeric: function(value, element) {
  return this.optional(element) || /^[\w\-\_]+$/.test(value);
},

Jeden komentarz

  1. […] z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, który jakiś czas temu opisywałem na swoim blogu. Ma on problem z taką sytuacją, że korzysta z funkcji remote, aby sprawdzić czy login danego […]

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]