Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Walidacja formularza - nie wywołują się funkcje
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
bartex9
15.06.2013, 20:56:27
Witam,
Mam taki problem. Mam formularz rejestracyjny. W każdym polu z osobna obsługuję zdarzenie onblur, które uruchamia mi odpowiednią funkcję walidującą js. I tutaj wszystko działa. Dodatkowo mam jednak funkcję wywoływaną po wysłaniu formularza, która wywołuje ponownie funkcje dla każdego pola formularza. I tutaj niestety pojawia się problem, bo te funkcje nie są ponownie wywoływane.

formularz.html:
[HTML] pobierz, plaintext 
  1. 		<form id='registerForm' method='post' onclick='waliduj(this)' action='../index.php/zarejestruj'>
  2. 			<label class='formLbl' for='nameEd'>Imię i nazwisko</label> <br />
  3. 			<input autofocus='autofocus' onblur='validate_is(this)' class='formEd' type='text' id='nameEd' name='nameEd' />	<br />
  4.  
  5. 			<label class='formLbl' for='loginEd'>Login:</label> <br />
  6. 			<input onblur='validate_is(this)' class='formEd' type='text' id='loginEd' name='loginEd' /> <br />
  7.  
  8. 			<label class='formLbl' for='passwdEd'>Hasło (min. 5 znaków):</label> <br />
  9. 			<input onblur='validate_pass(this)' class='formEd' type='password' id='passwdEd' name='passwdEd' /> <br />
  10.  
  11. 			<label class='formLbl' for='confpasswdEd'>Powtórz hasło:</label> <br />
  12. 			<input onkeyup='validate_pass2(this)' class='formEd' type='password' id='confpasswdEd' name='confpasswdEd' /> <br />
  13.  
  14. 		  	<input id='registerBtn' type='submit' class='button grey' value='Wyslij' /> 
  15. 		</form> 
[HTML] pobierz, plaintext


funkcje.js
Kod
function validate_is(form)
{
    if (form.value=='')
    {
        form.className="error";
        return false;
    }
    else
    {
        form.className="formEd";
        return true;
    }
}

function validate_pass(form)
{
    if (form.value=='' || form.value.length<5)
    {  
        form.className="error";
        return false;
    }
    else
        form.className="formEd";
}

function validate_pass2(form)
{
    var sc = document.getElementById('passwdEd');
    
    if (form.value!==sc.value)
    {  
        form.className="error";
        return false;
    }
    else
        form.className="formEd";
}

function waliduj(form)
{
    if (!validate_id(form.elements["nameEd"]))                    //TEN IF TAK JAKBY BYŁ CAŁKOWICIE POMIJANY
    {    
        alert("Popraw imię i nazwisko!");
    }
    
}
SmokAnalog
15.06.2013, 20:59:57
Dajesz form zdarzenie onclick zamiast onsubmit smile.gif Pamiętaj, by zrobić return false w callbacku onsubmit w przypadku błędu, bo inaczej formularz się wyśle niezależnie od rezultatu walidacji.
bartex9
15.06.2013, 21:20:11
Poprawiłem na onsubmit, dodałem w funkcji waliduj w instrukcji if zwracanie fałszu, mimo tego nadal nie działa. Wstawiłem tam sobie kilka alertów i wykonuje się tylko ten przed ifem, w ifie ani po nim już nie.
SmokAnalog
15.06.2013, 21:26:41
Wklej kod.
bartex9
15.06.2013, 21:27:52 
[HTML] pobierz, plaintext 
  1. 		<form id='registerForm' method='post' onsubmit='waliduj(this)' action='../index.php/zarejestruj'>
  2. 			<label class='formLbl' for='nameEd'>Imię i nazwisko</label> <br />
  3. 			<input autofocus='autofocus' onblur='validate_is(this)' class='formEd' type='text' id='nameEd' name='nameEd' />	<br />
  4.  
  5. 			<label class='formLbl' for='loginEd'>Login:</label> <br />
  6. 			<input onblur='validate_is(this)' class='formEd' type='text' id='loginEd' name='loginEd' /> <br />
  7.  
  8. 			<label class='formLbl' for='passwdEd'>Hasło (min. 5 znaków):</label> <br />
  9. 			<input onblur='validate_pass(this)' class='formEd' type='password' id='passwdEd' name='passwdEd' /> <br />
  10.  
  11. 			<label class='formLbl' for='confpasswdEd'>Powtórz hasło:</label> <br />
  12. 			<input onkeyup='validate_pass2(this)' class='formEd' type='password' id='confpasswdEd' name='confpasswdEd' /> <br />
  13.  
  14. 		  	<input id='registerBtn' type='submit' class='button grey' value='Wyslij' /> 
  15. 		</form> 
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. function validate_is(form)
  2. {
  3. 	if (form.value=='') 
  4. 	{
  5. 		form.className="error";
  6. 		return false;
  7. 	}
  8. 	else
  9. 	{
  10. 		form.className="formEd";
  11. 		return true;
  12. 	}
  13. }
  14.  
  15. function validate_pass(form)
  16. {
  17. 	if (form.value=='' || form.value.length<5) 
  18. 	{  
  19. 		form.className="error";
  20. 		return false;
  21. 	}
  22. 	else
  23. 		form.className="formEd";
  24. }
  25.  
  26. function validate_pass2(form)
  27. {
  28. 	var sc = document.getElementById('passwdEd');
  29.  
  30. 	if (form.value!==sc.value) 
  31. 	{  
  32. 		form.className="error";
  33. 		return false;
  34. 	}
  35. 	else
  36. 		form.className="formEd";
  37. }
  38.  
  39. function waliduj(form)
  40. {
  41. 	alert("Przed");
  42. 	if (validate_id(form.elements["nameEd"])==false)
  43. 	{	
  44. 		alert("Popraw imię i nazwisko!");
  45. 		return false;
  46. 	}
  47. 	alert("Po");
  48. }
[PHP] pobierz, plaintext
SmokAnalog
15.06.2013, 21:37:02
Drugi alert nie ma prawa się wykonać w przypadku negatywnej odpowiedzi walidatora, bo robisz:
[JAVASCRIPT] pobierz, plaintext 
  1. return false;
[JAVASCRIPT] pobierz, plaintext

Po którym nic więcej się już nie wykonuje smile.gif
bartex9
15.06.2013, 21:39:02
Tak, wiem tylko alert w ifie ale przed returnem też się nie wykonuje a formularz się wysyła.
SmokAnalog
15.06.2013, 21:46:38
  1. Napisałeś trochę niezrozumiale. Czyli wykonuje się jedynie alert "Przed"?
  2. Sprawdź co konsola mówi.
  3. Wklejaj na forum używając odpowiedniego kolorowania składni. Znacznik code wbrew pozorom nie służy do wklejania kodu.
bartex9
15.06.2013, 21:53:08
Dokładnie. Niezależnie od tego czy zakładany warunek z ifa jest w rzeczywistości spełniony czy nie, wykonuje się zawszy tylko alert przed nim. Jak to mogę sprawdzić w konsoli?
SmokAnalog
15.06.2013, 21:58:06
Wygląda mi to jakby jakiś błąd JS wyskakiwał i kod po prostu przestawał się wykonywać. Poszukaj w Google: konsola JavaScript [nazwa Twojej przeglądarki].
bartex9
15.06.2013, 22:03:12
Dostaję coś takiego:
Kod
Unhandled Error: Undefined variable: validate_id


No i wszystko jasne - literówka w nazwie funkcji. Teraz działa. Tylko jeszcze jeden mam problem. Nie wiem czemu, mimo iż w ifie zwracam false, formularz jest wysyłany.
SmokAnalog
15.06.2013, 22:15:53
Testuj z tymi alertami, to łatwo wyłapiesz w którym momencie coś jest nie tak.
bartex9
15.06.2013, 22:17:26
Alert z ifa mi się pojawia, czyli na pewno zwrócony zostaje fałsz. Formularz mimo to się wysyła.
SmokAnalog
15.06.2013, 22:25:20
Wiesz co? Zamiast atrybutu onsubmit, dodaj skrypty jak należy, czyli w samym skrypcie: element.onsubmit. Możliwe, że return z callbacków osadzonych w atrybutach się nie liczą. Czyli takie coś dopiero by działało:
[HTML] pobierz, plaintext 
  1. <form onsubmit="return false;">
[HTML] pobierz, plaintext

Ale to ogólnie nie jest zalecany sposób na dołączanie skryptów. Zrób tak jak napisałem powyżej smile.gif
bartex9
15.06.2013, 22:28:06
Faktycznie, teraz działa. Dzięki wielkie za pomoc!
SmokAnalog
15.06.2013, 22:30:36
Poczytaj: http://www.w3schools.com/js/js_htmldom_events.asp
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.