Forum PHP.pl

Witam.

Mam problem - nie mogę poradzić sobie z walidacją formularza pod kątem wypełnienia pól. Nie chodzi tu jednak o zwykłe sprawdzenie poszczególnych pól. Cały pic polega na tym, że chciałbym wykorzystać tą jedną funkcję do co najmniej 5 różnych formularzy - stąd mowa o uniwersalności. Widziałem już wiele funkcji, które sprawdzają poszczególne pola (po nazwie), ale to mnie nie urządza, ponieważ w formularzach liczba i nazwy pól generowane są dynamicznie w PHP i wahają się od kilku do 100 pól - pisanie z palca skryptu sprawdzającego każde pole po nazwie jest raczej bez sensu. Aczkolwiek nie jest tak, że każde pole jest inne - wszystko leci wg wzoru, czyli np. mam 10 pól i ich nazwy: pole_1, pole_2 itd.

Czy zna ktoś może jakiś skrypt, który sprawdza, czy zostały wypełnione wszystkie pola w danym formularzu niezależnie od ich nazwy czy ilości? Ograniczę się do pól tekstowych. Optymalnie by było, żeby np. podświetlał puste pola w formularzu na czerwono.

Walidacja ma działać "onsubmit" - jak coś jest źle, to nie wysyła, jak ok - wysyła.

Ten post edytował jurcio6 29.01.2011, 15:02:47

Po stronie PHP:

Pętla for:
$_POST["pole_$i"]
aż do liczby inputów.

Po stronie przeglądarki:
Każdy input ma tam jakąś klasę.
W jQuery łatwo się odnieść przez nią albo choćby input[type=text] + funkcja each.

Czy mógłbyś rozwinąć to po stronie przeglądarki? Bo jeśli o PHP chodzi, to ja już wszystko mam zrobione - mam napisany formularz krokowy (wieloetapowy) z możliwością dowolnego skakania po poszczególnych etapach (ze 2 dni siedziałem, ale działa ). Jedyne co mi teraz potrzebne jest do szczęścia to właśnie sprawdzanie tego formularza, a raczej tych formularzy (napisane na select/case) po wduszeniu submit'a. No i tak jak pisałem wcześniej - o ile funkcji pisanych pod dany formularz można znaleźć multum, o tyle żadnej uniwersalnej nie udało mi się odgrzebać.

Zastanawiałem się też nad taką funkcją (w JS), której podałbym 2 parametry - nazwę formularza i liczbę pól tekstowych - funkcja miałaby ten drugi parametr z liczbą uzupełnionych pól tekstowych i wtedy wiadomo - jeśli nie wszystkie pola są wypełnione, to return jakiś tam alert z błędem i przerwanie, natomiast jeśli wszystkie to submit.

Problem jest taki, że nie znam zbytnio JS, a co za tym idzie Ajaxa czy jQuerry. Dlatego potrzebuję pomocy..

PS jeśli to potrzebne, to mogę wrzucić kod PHP, ale jest on w wersji "roboczej" - mocno wymieszany z html'em i innymi cudami. Pominę już fakt, że jest go grubo ponad 200 linii..
PS2 nie wiem czy jest sens zaprzęgania całej biblioteki jQuerry do zrobienia głupiej (mało zaawansowanej) walidacji formularzy.. imo bez sensu.

Ten post edytował jurcio6 30.01.2011, 10:14:51

Biblioteka w jQuery w niczym nie będzie przeszkadzać, jak Ci szkoda tych paru kb to pobieraj ją z serwerów Google.

To w końcu po stronie serwera dałeś radę dodać walidacje?
Bo mimo wszystko ona musi być jako druga linia bo walidacji w JS.

Tak, po stronie serwera jest wszystko w PHP zrobione, chodzi teraz o walidację po stronie klienta (zabezpieczenie formularza pod kątem uzupełnienia wszystkich pól).

Znalazłem taką funkcję, która sprawdza się dosyć dobrze:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript" language="JavaScript">
function validateFormOnSubmit(theForm) {
var reason = "";
 
  reason += validateEmpty(theForm.survey_desc);
 
  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }
 
  return true;
}
 
function validateEmpty(fld) {
    var error = "";
 
    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fld.style.background = 'White';
    }
    return error;  
}
</script>
[JAVASCRIPT] pobierz, plaintext 

Formularz:

[HTML] pobierz, plaintext 
<form name="add_survey_step_1" action="test.php?step=2" method="POST" onsubmit="return validateFormOnSubmit(this)">
<textarea name="survey_desc" maxlength="250" style="width: 425px; height: 80px">
<input type="submit" name="submit_1" value="Krok 2 >>>" />
</form>
[HTML] pobierz, plaintext 

Tylko teraz mam taki problem - załóżmy, że mam 100 pól do sprawdzenia - musiałbym w skrypcie wywołać 100 razy "reason += validateEmpty(theForm.survey_desc);". Czy mógłby mi ktoś pomóc przerobić tę funkcję w taki sposób, żeby sprawdzała ona wszystkie pola z danego formularza (np. za pomocą getElementByTagName("input") ) i zaznaczała jakimś kolorem pola, które nie były wypełnione?

EDIT:

Nieważne.. sam sobie jakoś poradziłem mimo, że o JS nie mam zbyt wielkiego pojęcia.

Jeśli by ktoś potrzebował, to zamieszczam kod:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript" language="JavaScript">
var ClassName = "val";		//nazwa klasy elementów, które mają być poddane walidacji
var FocusColor = "#CC0000"; 	//kolor podświetlenia niewypełnionego pola
 
function checkForm(theForm) {
   var error = false;
   var inputfields = document.getElementsByTagName("input");
   for(var x = 0 ; x < inputfields.length ; x++ ) {
      if(inputfields[x].getAttribute("class") == ClassName) {
         if (inputfields[x].value.length == 0) {
            inputfields[x].style.background = FocusColor; 
	    error = true;
         } 
         else {
            inputfields[x].style.background = 'White';
         }
      }
   }
   if(error == true) {
      alert("Wypełnij wszystkie pola!");
      return false;
   }
}
</script>
[JAVASCRIPT] pobierz, plaintext 

Formularz:

[HTML] pobierz, plaintext 
<form name="add_survey_step_1" action="test.php?step=2" method="POST" onsubmit="return checkForm(this)">
<input type="text" name="survey_desc" class="val" maxlength="250" />
<input type="submit" name="submit_1" value="Krok 2 >>>" />
</form>
[HTML] pobierz, plaintext 

Należy pamiętać jedną ważną rzecz - aby element został poddany walidacji musi mieć ustawiony atrybut class="". Zrobiłem tak, ponieważ w formularzu będę miał takie pola, które nie muszą być wypełnione i nie będą poddane walidacji.

Problem pojawia się przy <textarea> - jako, że walidacja leci po inputach (var inputfields = document.getElementsByTagName("input") - wie ktoś jak to przerobić, żeby działało też na textarea?

Ten post edytował Ociu 2.02.2011, 13:13:12

A ja mam jedno pytanie; czy po wyłączeniu js w przeglądarce ominiemy taka walidacje?

Ten post edytował emajl22 2.02.2011, 11:48:06

Zapewne tak, ale wtedy jest jeszcze druga po stronie serwera (realizowana przez PHP), która nie przepuści pustych pól albo innych "cudaków". W moim przypadku ta walidacja w JS ma być bardziej pomocą dla użytkownika, niż zabezpieczeniem - chodzi zwyczajnie o to, żeby ktoś przypadkiem nie pominął któregoś z pól.

Udało mi się dorobić drugą część dla textarea, ale nie jest to zbyt eleganckie i optymalne... niestety próbując złożyć to w jedną pętlę nie działa. Nie znam na tyle JS. Czy byłby w stanie ktoś pomóc?

[HTML] pobierz, plaintext 
<script type="text/javascript" language="JavaScript">
var ClassName = "val";		//nazwa klasy elementów, które mają być poddane walidacji
var FocusColor = "#FFCC00"; 	//kolor podświetlenia niewypełnionego pola
 
function checkForm(theForm) {
	var error = false;
	var inputfields = document.getElementsByTagName("input");
	var textareas = document.getElementsByTagName("textarea");
 
	for(var x = 0 ; x < inputfields.length ; x++ ) {
		if(inputfields[x].getAttribute("class") == ClassName) {
			if (inputfields[x].value.length == 0) {
				inputfields[x].style.background = FocusColor; 
				error = true;
			} else {
				inputfields[x].style.background = 'White';
			}
		}
	}
 
	for(var x = 0 ; x < textareas.length ; x++ ) {
		if(textareas[x].getAttribute("class") == ClassName) {
			if (textareas[x].value.length == 0) {
				textareas[x].style.background = FocusColor; 
				error = true;
			} else {
				textareas[x].style.background = 'White';
			}
		}
	}
 
	if(error == true) {
		alert("Wypełnij wszystkie pola!");
		return false;
	}
}
</script>
[HTML] pobierz, plaintext 

Ten post edytował jurcio6 2.02.2011, 12:07:49

Hej

Do Twego kodu mam tylko jedną uwagę. W jakim celu przekazujesz do funkcji walidującej "theForm". Nigdzie w kodzie później z niego nie korzystasz... Ponadto pobierasz elementy formularza z całego dokumentu, a nie tylko z danego formularza. A co w przypadku gdy na stronie będzie kilka formularzy? Większość stron ma wyszukiwarkę + formularz kontaktowy => wtedy Twój kod się wysypie....

Pozdrawiam

Przekazywanie theForm to moje niedopatrzenie - pozostałość po poprzedniej funkcji. Jeśli chodzi o działanie skryptu na wszystkich formularzach: nie znam JS, ale z tego co wiem document jest traktowany jako plik. Skoro tak, to akurat w moim przypadku żadnych błędów nie będzie, ponieważ ja korzystam z tego skryptu w odrębnym pliku *.php - jest to formularz krokowy/wieloetapowy, zbudowany na switch/case. Mam tam 5 różnych formularzy, a skrypt działa tak, jak powinien.

Tak jak pisałem na początku - nie znam zbytnio JS, a to co zrobiłem jest zlepkiem kilku różnych skryptów. Ale skoro już zwróciłeś uwagę na pewne rzeczy, to mógłbyś również podpowiedzieć jak je poprawić - to nie jest topic, w którym chwalę się swoimi skryptami, tylko topic, w którym szukam pomocy.

Jeśli zależy Ci na uniwersalności kodu, to zaproponuję moje niedawne rozwiązanie:
--moderacja--

Do funkcji przekazujesz odpowiedni obiekt, który przecież możesz tworzyć za pomocą pętli w JS, jeśli pola mają inne nazwy, ale tak naprawdę zasady walidacji te same.

Ten post edytował Cysiaczek 13.06.2011, 08:52:59

@email22 Można zostawić walidację tylko i wyłącznie po stronie klienta. Możesz formularz wysyłać ajaxem i po wyłączeniu JS nie będzie możliwości wysłania takiego formularza. Ale może być to irytujące rozwiązanie dla przeglądarek tekstowych bądź mobilnych które sobie nie radzą bądź nie mają obsługi JS. Ale lepiej nie rezygnować z walidacji po stronie php przynajmniej tych wrażliwych pól.