Walidacja formularza w jQuery

Jeśli chcemy sprawdzić czy dane wpisane przez użytkownika do formularza są prawidłowe jeszcze przed przesłaniem go na serwer możemy to bardzo łatwo zrobić m.in. przy pomocy Javascript i biblioteki jQuery. Pamiętajmy jednak by zawsze walidować przesłane dane również po stronie serwera, ponieważ walidacja formularza w javascript może być łatwo ominięta.

Zacznijmy od napisania prostego formularza z trzema polami:

  • Nazwa, która będzie musiała zawierać się w przedziale od 5 do 15 znaków
  • Email, który będzie musiał być prawidłowym emailem
  • Wiadomość, która nie będzie mogła być pusta

Zaczynajmy. Na początku napiszmy prosty formularz w HTML’u.

<form id="formularz" method="post" action="">
    
        <div>
            <label for="name">Nazwa:</label>
            <input type="text" id="name" name="name"></input>
            <span class="komunikat"></span>
        </div>
       
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email"></input>
            <span class="komunikat"></span>          
        </div>                        
        
        <div>
            <label for="message">Wiadomość:</label>
            <textarea id="message" name="message"></textarea>
            <span class="komunikat"></span>                                               
        </div>                    
       
        <div id="submit">             
            <button type="submit">Wyślij</button>
        </div>

</form>

Wewnątrz formularza w znacznikach div znajdują się kolejne pola formularza. Wewnątrz label znajduje się opis kolejnego pola. W kolejnej linii znajduje się pole (czyli znacznik input), a następnie pusty znacznik span, do którego przy pomocy Javascript wstawimy komunikat poprawności danego pola. Ostatni div różni się od wcześniejszych, ponieważ zawiera tylko button dzięki któremu będziemy mogli wysłać nasz formularz.

Zanim zaczniemy pisać kod walidujący poszczególne pola formularza dodajmy jeszcze kilka stylów CSS, by wyrównać formularz i nadać kolory komunikatom.

#formularz label{
    display: inline-block;
    width: 100px;
    text-align: right;
}

#submit{
	padding-left: 100px;
}

#formularz div{
	margin-top: 1em;		
}
	
#formularz div input{
	width: 170px;
}

textarea{
	vertical-align: top;
	height: 5em;
	width: 170px;		
}

input.invalid, textarea.invalid{
    border: 3px solid red;
}
 
input.valid, textarea.valid{
    border: 3px solid green;
}

.blad {
	color: red;	
}

.ok {
	color: green;	
}

Klasy .invalid oraz .valid dodają polom czerwoną lub zieloną ramkę – zaznaczymy w ten sposób czy pole zostało poprawnie wypełnione. Klasy .blad oraz .ok  zostaną później przypisane do znacznika span(komunikat). Reszta stylów wyrównuje wszystkie elementy formularza.

Gdy nasz kod HTML oraz CSS jest już gotowy możemy przejść do walidacji  w jQuery. Aby skorzystać z biblioteki jQuery musimy podpiąć ją do naszej strony. W tym celu dodajmy poniższą linijke wewnątrz znacznika head.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Możemy również podpiąć jQuery z pliku lokalnego, wtedy będziemy musieli w atrybucie src podać ścieżkę do pliku. Przejdźmy dalej.

<script>
$(document).ready(function() {


});
</script>

Znacznik script rozpoczyna i kończy blok kodu Javascript. Funkcja ready wywołana na dokumencie sprawia, że kod pomiędzy znacznikami { } wykona się dopiero wtedy gdy strona będzie na to gotowa.

Możemy przystąpić teraz do walidacji pola nazwy. Przypomnę, że chcemy aby wartość tego pola miała od 5 do 15 znaków.

$('#name').on('blur', function() {
		var input = $(this);
		var name_length = input.val().length;
		if(name_length >= 5 && name_length <= 15){
			input.removeClass("invalid").addClass("valid");
			input.next('.komunikat').text("Wprowadzono poprawną nazwę.").removeClass("blad").addClass("ok");
		}
		else{
			input.removeClass("valid").addClass("invalid");
			input.next('.komunikat').text("Nazwa musi mieć więcej niż 4 i mniej niż 16 znaków!").removeClass("ok").addClass("blad");
			
		}
});

W pierwszej linijce odwołujemy się do pola o ID name oraz wywołujemy funkcję on, do której w parametrze podajemy zdarzenie  blur. Zdarzenie blur aktywowane jest po utracie focusa (jeśli aktywujemy pole input poprzez kliknięcie lub klawisz tab, a następnie przejdziemy do kolejnego pola lub klikniemy gdziekolwiek poza polem). Kod pomiędzy znacznikami { } wewnątrz funkcji on wykona się właśnie wtedy.

Do zmiennej input przypisujemy przy pomocy $(this)  pole na którym działamy (ID #name).

Do zmiennej name_length przypisujemy długość wartości (czyli ilość znaków, które wpiszemy) pola #name. Następnie w instrukcji warunkowej if podajemy warunek pola #name. Chcemy by użytkownik musiał podać nazwę o długości z zakresu od 5 do 15 znaków. Jeśli poda taką wartość wtedy z pola #name (które jest przypisane zmiennej input ) usuwamy klasę .invalid a dodajemy .valid – dzięki temu pole uzyska zielone obramowanie oraz do kolejnego (next) elementu o klasie .komunikat dodajemy odpowiedni komunikat oraz nadajemy mu klasę .ok co powoduje zmianę koloru komunikatu na zielony.  W przeciwnym wypadku (else) usuwamy klasę .valid a dodajemy .invalid  co sprawi że pole uzyska czerwone obramowanie oraz dodajemy komunikat o błędzie dodając tym razem klasę .blad, która doda komunikatowi czerwony kolor.

I to wszystko jeśli chodzi o walidację pola z nazwą. Przejdźmy do sprawdzenia emaila.

$('#email').on('blur', function() {
		var input = $(this);
		var pattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
		var is_email = pattern.test(input.val());
		if(is_email){
			input.removeClass("invalid").addClass("valid");
			input.next('.komunikat').text("Wprowadzono poprawny email.").removeClass("blad").addClass("ok");
		}
		else{
			input.removeClass("valid").addClass("invalid");
			input.next('.komunikat').text("Wprowadź poprawny email!").removeClass("ok").addClass("blad");
		}
});

Początek walidacji pola email różni się tylko innym ID na początku. Większa różnica pojawia się dopiero przy zmiennej pattern. Ta zmienna przechowuje wyrażenie regularne – wzór według którego będziemy testować wartość pola email. Zmienna is_email przechowuje wartość którą zwraca true jeśli wartość email jest zgodna ze wzorem lub false jeśli nie jest.

W instrukcji warunkowej if sprawdzamy czy is_email przechowuje true. Jeśli tak to wykonywany jest niemal identyczny kod jak przy walidacji pola name, podobnie w przypadku else.

Kolejna walidacja – tym razem pola wiadomości. W tym przypadku walidacja jest najprostsza, ponieważ sprawdzamy tylko czy użytkownik coś wpisał.

$('#message').on('blur', function() {
		var input = $(this);
		var message = $(this).val();
		if(message){
			input.removeClass("invalid").addClass("valid");
			input.next('.komunikat').text("Wprowadzono poprawną wiadomość.").removeClass("blad").addClass("ok");
		}
		else{
			input.removeClass("valid").addClass("invalid");
			input.next('.komunikat').text("Wiadomość nie może być pusta!").removeClass("ok").addClass("blad");
		}   
});

Początek jest niemal identyczny jak w poprzednich polach. Do zmiennej message zostaje przypisana wartość pola o id #message. W instrukcji if sprawdzamy czy jakakolwiek do zmiennej message została przypisana jakakolwiek wartość – jeśli tak to pole jest poprawnie wypełnione. Reszta przebiega jak przy poprzednich polach.

Sprawdziliśmy już wszystkie pola ale nawet gdy nie są wypełnione poprawnie to możemy przesłać formularz. Zablokujmy tą możliwość.

$('#submit button').click(function(event){
			var name = $('#name');
			var email = $('#email');
			var message = $('#message');
			
			if(name.hasClass('valid') && email.hasClass('valid') && message.hasClass('valid')){
				alert("Pomyślnie wysłano formularz.");	
			}
			else {
				event.preventDefault();
				alert("Uzupełnij wszystkie pola!");	
			}
});

Odwołujemy się do buttona w divie #submit. W tym przypadku używamy funkcji click czyli kod między znacznikami { } wykona się jedynie po kliknięciu przycisku.

Kolejno do zmiennych name, email, message przypisujemy odpowiadające im pola w formularzu. Następnie w instrukcji if sprawdzamy czy każde z pól posiada klasę .valid co oznacza że pomyślnie przeszło walidację i może zostać przesłane na serwer. Wyświetlany jest również alert z krótką wiadomością. W przeciwnym wypadku przy pomocy event.preventDefault(); blokujemy wysłanie formularza i wyświetlamy komunikat o błędzie.

Cały kod Javascript-jQuery:

<script>
$(document).ready(function() {

	//Walidacja nazwy
	$('#name').on('blur', function() {
		var input = $(this);
		var name_length = input.val().length;
		if(name_length >= 5 && name_length <= 15){
			input.removeClass("invalid").addClass("valid");
			input.next('.komunikat').text("Wprowadzono poprawną nazwę.").removeClass("blad").addClass("ok");
		}
		else{
			input.removeClass("valid").addClass("invalid");
			input.next('.komunikat').text("Nazwa musi mieć więcej niż 4 i mniej niż 16 znaków!").removeClass("ok").addClass("blad");
			
		}
	});
		
	//Walidacja email
	$('#email').on('blur', function() {
		var input = $(this);
		var pattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
		var is_email = pattern.test(input.val());
		if(is_email){
			input.removeClass("invalid").addClass("valid");
			input.next('.komunikat').text("Wprowadzono poprawny email.").removeClass("blad").addClass("ok");
		}
		else{
			input.removeClass("valid").addClass("invalid");
			input.next('.komunikat').text("Wprowadź poprawny email!").removeClass("ok").addClass("blad");
		}
	});	
	
	//Walidacja wiadomości
	$('#message').on('blur', function() {
		var input = $(this);
		var message = $(this).val();
		if(message){
			input.removeClass("invalid").addClass("valid");
			input.next('.komunikat').text("Wprowadzono poprawną wiadomość.").removeClass("blad").addClass("ok");
		}
		else{
			input.removeClass("valid").addClass("invalid");
			input.next('.komunikat').text("Wiadomość nie może być pusta!").removeClass("ok").addClass("blad");
		}   
	});
	
	//Po próbie wysłania formularza
		$('#submit button').click(function(event){
			var name = $('#name');
			var email = $('#email');
			var message = $('#message');
			
			if(name.hasClass('valid') && email.hasClass('valid') && message.hasClass('valid')){
				alert("Pomyślnie wysłano formularz.");	
			}
			else {
				event.preventDefault();
				alert("Uzupełnij wszystkie pola!");	
			}
		});
});
</script>

 

I na tym kończymy walidację naszego formularza 🙂

Zobacz przerabiany przykład tutaj.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Pojawianie się elementów strony podczas przewijania Jak dodać cząsteczki do tła kontenera Odtwarzanie filmu z Youtube w tle
View Comments