Kwestia walidacji różnego rodzaju formularzy z polami typu checkbox z wykorzystaniem JavaScript to niby sprawa bardzo prosta, ale dosyć często ktoś pyta mnie o rozwiązanie takiego „problemu”. Postanowiłem więc na prostym przykładzie pokazać jak zrobić taką walidację zarówno z wykorzystaniem czystego JavaScript jak i biblioteki jQuery. Zwrócę również uwagę na problem powstający w momencie „tablicowego” nazewnictwa pól, dzięki któremu w przypadku pól checkbox po stronie PHP wygodnie przetwarzamy sobie przesłane dane.

JavaScript

Ok przejdźmy do rzeczy, mamy jakiś banalny formularz z wyborem imion :

Maciej
Kazek
Czesio
Majka
Gabrysia

Jak widać bezpośrednio pod znacznik FORM podpiąłem funkcję walidacji – nie jest to oczywiście najlepsze rozwiązanie, ale nie o to w tym przykładzie chodzi.

Nasza funkcja wygląda tak :

function walidacja(formularz)
{
	var ile = formularz.imie.length;
	var zaznaczono = false;
	for (var i=0; i < ile ; i++)
	{
		if(formularz.imie[i].checked == true)
		{
      			zaznaczono = true;
      			break;
		}
	}
	if(zaznaczono == false)
	{
    		alert('Proszę zaznaczyć przynajmniej jedną opcję !');
    		return false;
	}
	return true;
}

Jest ona bardzo prosta i nie ma sensu żeby tłumaczyć ją kawałek po kawałku. Problem pojawi się jednak kiedy nasze pola będą zamiast "imie" nazywać się "imie[]" - zapis ten jest bardzo często stosowany przez programistów PHP. W przypadku jQuery, którym za chwilę się zajmiemy sprawa jest prosta - wykorzystamy klasy dla pół checkbox, jednak dla czystego JS nie jest już tak różowo. Z tego względu rozwiązaniu tego problemu z wykorzystaniem raw js poświęcę osobny wpis - niebawem

jQuery

jQuery to naprawdę poczciwy "wynalazek" pozwalający nam na łatwe "operowanie" JavaScriptem z zachowaniem wysokiej wydajności kodu. Rozwiązanie naszej walidacji pól checkbox w jQuery jest bardzo proste, a ponadto możemy w łatwy sposób uporać się z tablicowym nazewnictwem pól.

Mamy więc formularz :

Maciej
Kazek
Czesio
Majka
Gabrysia

I oczywiście jQuery :

$(document).ready(
	function()
	{
		$("form#f").submit (
			function()
			{
        			if($('.imie').is(":checked") == false)
        			{
            				alert("Proszę wybrać przynajmniej jeden element !");
					return false;
        			}
				return true;
      			}
     		);
	}
);

Czyż to nie proste i wspaniałe ? Problem nazewnictwa pól został rozwiązany dzięki wykorzystaniu dodatkowej klasy nadanej dla każdego z pół formularza.