[jQuery] Walidacja wpisywanych informacji w panelu logowania/rejestracji

Walidacja wpisywanego tekstu z użyciem jQuery

jQuery Opublikowano: 4/01/2010

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

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?

8 komentarze/y

Tweets that mention [jQuery] Walidacja wpisywanych informacji w panelu logowania/rejestracji | Piotr Nalepa - Blog webmasterski | Porady i tutoriale -- Topsy.com
04/01/2010 o 21:25
[...] This post was mentioned on Twitter by Piotr Nalepa. Piotr Nalepa said: NOWY WPIS: [jQuery] Walidacja wpisywanych infor… http://bit.ly/8EZRgH [...]
chomiczek
20/01/2010 o 10:43
Podglądając kod na http://blog.piotrnalepa.pl/demo/walidacja.html widzę np: „Nazwa użytkownika musi mieć od 5 do 25 znaków”, ale po kliknięciu wyślij nigdzie nie widać tego komunikatu natomiast widać: „To pole jest wymagane.” Dodatkowo próba implementacji tego kodu u mnie nie działa.
Piotr Nalepa
20/01/2010 o 12:10
Sprawdzę jeszcze raz to wyświetlanie tego komunikatu, bo możliwe ze coś pominąłem.
Co do implementacji u Ciebie, to sprawdź czy przypadkiem nie ma jakiegoś konfliktu z innymi bibliotekami lub skryptami JavaScript.
Krzysztof
09/05/2010 o 18:28
jQuery(document).ready(function() {
jQuery.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);
});
jQuery.validator.addMethod(„imie”,function(value,element) {
return this.optional(element) || /^[a-zA-Z0-9._-]{5,25}$/i.test(value);
});
jQuery.validator.addMethod(„password”,function(value,element){
return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{5,25}$/i.test(value);
});
jQuery(„#kn”).validate({
rules: {
email: {required: true, email: true},
imie: {required: true, imie: true,},
password: {required: true, password: true,},
},
messages:{
email: {required: ” Podaj email”, email: ” Wpisz poprawny adres e-mail”},
imie: {required: ” Podaj imię i nazwisko”, imie: ” Zle wpisałeś imię i nazwisko”},
password: {required: ” Podaj hasło”, password: ” Zle wpisałeś hasło”}
}
});
});
Małe poprawki u mnie działa, pozdrawiam
Piotr Nalepa
09/05/2010 o 20:15
Dzięki za poprawki, na pewno się przydadzą komuś komu nie działa wersja z artykułu.
bartek
25/09/2010 o 02:40
Jak dodać ENTER aby po jego wciśnięciu nie wyskakiwał komunikat o błędzie? Chodzi o to że input zamieniłem na textarea no i tam jest dozwolone wstawianie ENTERa. Np. spację dodałem jako dozwolony znak i działa. Próbowałem dodać ENTER poprzez znaczek #13 ale to nie działa.
bartke
25/09/2010 o 11:16
Dodatkowo zauważyłem że nie działa walidacja pod IE6
Comandeer
02/11/2010 o 22:09
Dzięki HTML 5 takie wynalazki jak jQuery validate będą powoli odchodziły w niepamięć. Sam często korzystałem z tego pluginu, ale kiedy stwierdziłem, że próba zmuszenia IE do wyświetlenia strony z canvas i tak jest daremna, to wszystkie if”y zmieniły się w required. Dla znacznika form nie powinno używać się atrybutu name – id wystarczy