[jQuery] Walidacja wpisywanych informacji w panelu logowania/rejestracji

W tym artykule poruszam kwestię walidacji wpisywanego tekstu w pola, które ustanowiliśmy w procesie rejestracji, logowania czy po prostu w formularzu kontaktowym. Jest to niewątpliwie jeden ze sposobów na uniknięcie błędnie wpisywanych informacji na stronie przez użytkownika.
Jak to zrobić z wykorzystaniem biblioteki jQuery i pluginu do niej?

Nie wiem czy pamiętasz, ale jakiś czas temu napisałem artykuły o tym jak stworzyć ładnie wyglądający formularz oraz o wyrażeniach regularnych (dotyczy nie tylko PHP). Zamierzam je wykorzystać w tej poradzie wprowadzając kilka zmian w formularzu i wykorzystując te wyrażenia.
Ponadto, należy pobrać plugin jquery.validate i dołączyć go do kodu formularza, tak samo jak blibliotekę jQuery.
Kod HTML będzie wyglądał teraz następująco:

<form method="post" action="dziekuje.html" name="rejestracja" id="rejestracja">
<div class="box">
<h1>Formularz rejestracji :</h1>
 
        <label>
            <span>Nazwa użytkownika :</span>                
<input type="text" class="wpis" name="username" id="username"/>
        </label>
        <label>
            <span>E-mail :</span>
<input type="text" class="wpis" name="email" id="email"/>
        </label>
        <label>
            <span>Hasło :</span>                 
<input type="text" class="wpis" name="password" id="password"/>
        </label>
        <label>                                
<input type="submit" class="button" id="submit" name="submit" value="Wyślj" />
        </label>
    </div>
</form>

W tym kodzie dodałem akcję przeniesienia na nową stronę po spełnieniu wymogów walidacji oraz pozmieniałem częściowo nazewnictwo na potrzeby pluginu.
W kodzie CSS natomiast, dodałem taki oto zapis:

label.error {
	font-size: 11px;
	background-color: #cc0;
	color: #fff;
	padding: 5px;
	text-align: center;
}

Odpowiada on za wygląd informacji o błędzie.
Kod JS odpowiadający za walidację naszego formularza wygląda następująco:

$(document).ready(function() {
 
	$.validator.addMethod("email", function(value, element) {  
		return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+.[a-zA-Z.]{2,5}$/i.test(value);  
	}, "Wpisz poprawny adres e-mail.");
 
	$.validator.addMethod("username",function(value,element) {
		return this.optional(element) || /^[a-zA-Z0-9._-]{5,25}$/i.test(value);  
	},"Nazwa użytkownika musi mieć od 5 do 25 znaków");
 
	$.validator.addMethod("password",function(value,element){
		return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{5,25}$/i.test(value);  
	},"Hasło musi mieć od 5 do 25 znaków");
 
	$("#rejestracja").validate({
		rules: {
			email: "required email",
			username: "required username",
			password: "required password",		
		},
	});
});

Ważne jest to, aby zachować angielskie nazwy w "rules".
Demo z tego przykładu jest dostępne tutaj: walidacja formularza z wykorzystaniem jQuery.
Dodatkowo, przygotowałem paczkę z plikami z tego artykułu: walidacja formularza z wykorzystaniem jQuery - pliki. Ot taki mały bonusik na Nowy Rok 2010.
Uważacie że to dobry pomysł zamieszczać w ten sposób pliki z porad?