search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[jQuery] Walidacja wpisywanych informacji w panelu logowania/rejestracji

[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?

  • chomiczek

    Podglądając kod na https://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.

  • 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

    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

  • Dzięki za poprawki, na pewno się przydadzą komuś komu nie działa wersja z artykułu.

  • bartek

    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

    Dodatkowo zauważyłem że nie działa walidacja pod IE6

  • Comandeer

    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