Kubiczek devblog » Javascript

jQuery, validate plugin a weryfikacja numeru NIP i PESEL

Adam Kubiczek — Thu, 24 Dec 2009 01:23:54 +0000

Napisałem dwa dodatkowe walidatory do pluginu jquery-plugin-validation, które sprawdzają poprawność numeru NIP oraz PESEL.

Najpierw metoda dodająca walidację numeru NIP:

jQuery.validator.addMethod("nip", function(value, element) {
var verificator_nip = new Array(6,5,7,2,3,4,5,6,7); var nip = value.replace(/[\ \-]/gi, ''); 
if (nip.length != 10)  { return false; } else  {
var n = 0;
for (var i=0; i<9; i++) {	n += nip[i] * verificator_nip[i]; }
n %= 11;
if (n != nip[9]) { return false; }
}
return true;	
}, "Proszę o podanie prawidłowego numeru NIP");

Wystarczy zrobić capy&paste powyższego kodu, do swojej aplikacji. A teraz PESEL:

jQuery.validator.addMethod("pesel", function(value, element) {
var pesel = value.replace(/[\ \-]/gi, ''); 
if (pesel.length != 11) { return false; } else {
var steps = new Array(1, 3, 7, 9, 1, 3, 7, 9, 1, 3); 
var sum_nb = 0;
for (var x = 0; x < 10; x++) { sum_nb += steps[x] * pesel[x];}
sum_m = 10 - sum_nb % 10;
if (sum_m == 10) { sum_c = 0; } else { sum_c = sum_m;}
if (sum_c != pesel[10]) {	return false;}
}
return true;	
}, "Proszę o podanie prawidłowego numeru PESEL");

~~Tak się zastanawiam, gdzie do diaska się podział plugin odpowiedzialny za kolorowanie składni? :)~~ (odnalazł już się)

Proszę jednak mieć na uwadze, że żyją w Polsce ludzie posiadający nieprawidłowy, z punktu widzenia algorytmu, numer PESEL. Taki urok naszej administracji :) Dlatego warto błąd weryfikacji tego numeru, stosować do ostrzeżenia użytkownika, ale niekoniecznie do całkowitego zablokowania akcji.

I jeszcze przykład wykorzystania walidatora:

$("#orderform").validate({
    rules: {
       field_nip: {
           nip: {
               depends: "#field_nip:filled"
           },			    
           required: "#field_companyname:filled"
        }
    }
});

Powyższy przykład dokona walidacji formularza #orderform, i sprawdzi numer NIP wg następujących reguł:

1) Pole z numerem NIP (field_nip) musi być wypełnione w przypadku gdy podana zostanie nazwa firmy (field_companyname)

2) Jeżeli zostanie podany numer NIP, to sprawdź jego poprawność

DateTimePicker komponent

Adam Kubiczek — Mon, 01 Sep 2008 16:11:05 +0000

Takie coś kiedyś napisałem (hen dawno temu), a teraz na powrót to odkryłem:

(aby zobaczyć prawidłowo funkcjonujące demo otwórz skrypt w nowym oknie)

Jest to prosty skrypt wyświetlający kalendarzyk, i wstawiający wybraną przez użytkownika datę do pola tekstowego. Wywołanie skryptu jest banalne:

W drugim parametrze przekazujemy id pola tekstowego, do którego chcemy wstawić wybraną przez użytkownika datę. Paczuszkę ze skryptem, stylami i przykładowym użyciem można pobrać tutaj. Jak zajrzycie do kodu źródłowego, to odkryjecie wiele dodatkowych możliwości (ok, zdradzę trochę: można zmienić język w jakim kalendarz jest wyświetlany, albo format zwracanej daty).

Scroller, pokazywacz komunikatów, reklam itp.

Adam Kubiczek — Tue, 26 Aug 2008 22:23:15 +0000

Pod tym wybitnym tytułem, kryje się obiekt w Javascript, który powstał pewnego dnia w przerwie pomiędzy pierwszą kanapką a drugą ;). W każdym razie umożliwia on łatwo osiągnięcie takiego efektu jak widać to poniżej.

A oto kod obiektu:

function Scroller(divID,stringsArray) {
 
	var pause=3000;
 
	var currentIndex=0;
	var mainDiv=document.getElementById(divID);
	var innerDiv=document.createElement('div');
	mainDiv.style.overflow='hidden';
 
	mainDiv.appendChild(innerDiv);	
 
	var marginTop;
	var stepDelta=2;
 
	var initScrolling = function() {
		marginTop=mainDiv.offsetHeight;
		innerDiv.innerHTML=stringsArray[currentIndex];
		innerDiv.style.marginTop=marginTop+'px';
	}
 
	var CountDelta = function() {
		var newDelta=Math.sin(marginTop/mainDiv.offsetHeight)*10;
		if (newDelta&lt;=0.01) { newDelta=0.01; }	
		return newDelta;
	}	
 
	var SetPosition = function() {
		stepDelta=CountDelta()
 
		if (marginTop&gt;0) {
			marginTop-=stepDelta;			
			innerDiv.style.marginTop=marginTop+'px';
		}
 
		return marginTop;
	}
 
	var nextString = function() {
		if (currentIndex&lt;stringsArray.length-1) {
			currentIndex++;
		} else {
			currentIndex=0;
		}
		startScrolling();
	}
 
	var startScrolling = function() {
 
		initScrolling();
 
		var stepInterval = window.setInterval(function () {
			if (SetPosition()&lt;=0) {
				clearInterval(stepInterval);
				setTimeout(nextString,pause);
			} 
		},10);
	}
 
	startScrolling();
}

A tutaj przykład użycia:

W pierwszym parametrze konstruktora przekazujemy ID warstwy na której chcemy wyświetlać komunikaty, w drugim natomiast tablicę z komunikatami. Voila.

Przetestowane pod Firefox2, IE7, Opera9.

Obsługa klawiszy shift i ctrl w javascript.. na żywym przykładzie :)

Adam Kubiczek — Tue, 26 Aug 2008 22:03:37 +0000

Pewną bolączką webowych interfejsów użytkownika, jest brak niektórych możliwości jakie można na co dzień spotkać w interfejsach systemów operacyjnych. Jednym z takich brakujących elementów, jest możliwość wybierania myszką wielu pozycji z listy, wspomagając się klawiszami SHIFT i CTRL. Pora więc nadrobić braki i wykonać mechanizm implementujący taką funkcję na stronie WWW. Jak się okaże, nie jest to nic trudnego.

Zacznijmy od utworzenia kodu HTML naszej listy wyboru. Kolejne elementy listy będą umieszczone na oddzielnych warstwach, chociaż nic nie stoi na przeszkodzie aby były to inne elementy, na przykład wiersze tabeli lub wypunktowania. Wszystkie elementy zgrupujemy na warstwie głównej, co ułatwi nam automatyczne przypisywanie do nich zdarzeń. Nasz kod może wyglądać w ten sposób:


 Opcja nr 1
 Opcja nr 2
 Opcja nr 3
 Opcja nr 4

Następnie, poszczególnym Divom odpowiadającym kolejnym elementom naszej listy powinniśmy przypisać zdarzenie onclick tak aby reagowały na kliknięcie na nich myszką. Napiszemy więc funkcję przypisz(), która pobierze wszystkie Divy należące do listy i w pętli przypisze im handler zdarzenia onclick:

var ListKontenerID='ListaDiv';
 
function przypisz() {
 var x=document.getElementById(ListKontenerID).getElementsByTagName('div');
 for(var i=0;i&amp;ltx.length;i++) {
  x[i].onclick = klik;
  x[i].setAttribute('numer',i);
 }
}

Tutaj należą się dwa słowa wyjaśnienia. Zdarzenia dodajemy poprzez przypisanie elementowi nazwy funkcji, która obsłuży nasze kliknięcia. Zgodnie z specyfikacją DOM Level 2 powinniśmy to robić za pomocą metody addEventListener(), jednakże jak na razie ani Opera ani MSIE nie obsługują tego modelu zdarzeń.

Dodatkowo, w pętli numerujemy sobie poszczególne warstwy, tak abyśmy później szybko mogli stwierdzić, który w kolejności element listy został kliknięty. Numerację wykonujemy poprzez dodanie do Diva nowego atrybutu o nazwie “numer”.

Funkcję przypisz() powinniśmy wywoływać po załadowaniu strony, np. w zdarzeniu onload:

Zanim przejdziemy do właściwej obsługi zdarzenia onclick, utwórzmy jeszcze dwie funkcje pomocnicze, które będą nam zaznaczać i odznaczać wskazany element listy:

function zaznacz(obiekt) {
 obiekt.setAttribute('wybrany','wybrany');
 obiekt.className='podswietlony';
}
 
function odznacz(obiekt) {
 obiekt.setAttribute('wybrany','');
 obiekt.className='';
}

W tych funkcjach można zaimplementować dowolnie skomplikowane akcje; istotne jest aby pozostawić jedynie ustawianie i gaszenie atrybutu “wybrany”, który będzie wykorzystywany podczas obsługi zdarzeń. W przykładzie powyżej, wykonujemy dodatkowo jedynie ustawianie stylu “podswietlony” do wybranego elementu.

Po przygotowaniu terenu działań możemy przystąpić do implementacji najważniejszej funkcji przechwytującej zdarzenia. Jak się okazuje, sprawdzenie czy był wciśnięty klawisz shift lub ctrl jest banalnie proste: obiekt zdarzenia przechowuje właściwości o nazwie shiftKey oraz ctrlKey. Wystarczy więc sprawdzić jej stan podczas kliknięcia myszką i zależnie od wyniku podjąć odpowiednią akcję:

function klik(e) {
	if (!e &amp;&amp; event) {
		e=event;
		e.target=event.srcElement;
	}
 
	if (e.shiftKey &amp;&amp; PoprzedniNumer!=null) {
 
		var n1=e.target.getAttribute('numer');
		var n2=PoprzedniNumer;
 
		if (n1&gt;n2) { var tmp=n2; n2=n1; n1=tmp; }
		x=document.getElementById(ListKontenerID).getElementsByTagName('div');
 
		for(var i=n1;i&lt;=n2;i++) {
			zaznacz(x[i]);
		}
 
	} else if (e.ctrlKey) {
		if (e.target.getAttribute('wybrany')!='wybrany') {
			zaznacz(e.target);
		} else {
			odznacz(e.target);
		}		
 
	} else {
		x=document.getElementById(ListKontenerID).getElementsByTagName('div');
		for(var i=0;i&lt;x.length;i++) {
			odznacz(x[i]);
		}
 
		if (e.target.getAttribute('wybrany')!='wybrany') {
			zaznacz(e.target);
		} else {
			odznacz(e.target);
		}
	}
 
	PoprzedniNumer=e.target.getAttribute('numer');
 
	return false;
}

Działające demo można zobaczyć tutaj: detekcja klawiszy specjalnych w javascript.