Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z walidacją
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Mefiuu
24.01.2011, 22:56:50
Witam. Uczę się powoli JavaScriptu i postanowiłem sobie zrobić walidację formularza, a każde sprawdzane pole jest sprawdzane po jego opuszczeniu (funkcja onblur) i jeśli jest źle to blokuje mi przycisk wyślij. Napisałem tak:

[JAVASCRIPT] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
  3. <head>
  4. <title>Strona z newsem</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6.  
  7. <script type="text/javascript">
  8.  
  9. 	window.onload = Laduj;
  10. 	var error = false;	
  11.  
  12.  
  13. 	function Laduj() {
  14. 		document.forms['wyslij'].imie.onblur = SprawdzImie;
  15. 		document.forms['wyslij'].nazwisko.onblur = SprawdzNazwisko;
  16. 	}
  17.  
  18. 	function SprawdzImie() {
  19. 		var imie = document.forms['wyslij'].imie.value;
  20.  
  21. 		var imie2 = document.getElementById('imie2');
  22.  
  23. 		if (imie == '') {
  24. 			document.forms['wyslij'].imie.style.background = 'red';
  25. 			imie2.innerHTML = 'Nie wpisałeś';
  26. 			error = true;
  27. 		}
  28. 		else if(imie.length<5) {
  29. 			document.forms['wyslij'].imie.style.background = 'red';
  30. 			imie2.innerHTML = 'za krótkie';
  31. 			error = true;
  32. 		}
  33. 		else {
  34. 			document.forms['wyslij'].imie.style.background = 'green';
  35. 			imie2.innerHTML = 'ok';
  36. 			error = false;
  37. 		}
  38.  
  39. 		if (error) {
  40. 			document.getElementById('submit').setAttribute('disabled', 'disabled');
  41. 		}
  42. 		else {
  43. 			document.getElementById('submit').removeAttribute('disabled', 'disabled');
  44. 		}
  45. 	}
  46.  
  47. 	function SprawdzNazwisko() {
  48. 		var nazwisko = document.forms['wyslij'].nazwisko.value;
  49.  
  50. 		var nazwisko2 = document.getElementById('nazwisko2');
  51.  
  52. 		if (nazwisko == '') {
  53. 			document.forms['wyslij'].nazwisko.style.background = 'red';
  54. 			nazwisko2.innerHTML = 'Nie wpisałeś';
  55. 			error = true;
  56. 		}
  57. 		else if(nazwisko.length<5) {
  58. 			document.forms['wyslij'].nazwisko.style.background = 'red';
  59. 			nazwisko2.innerHTML = 'za krótkie';
  60. 			error = true;
  61. 		}
  62. 		else {
  63. 			document.forms['wyslij'].nazwisko.style.background = 'green';
  64. 			nazwisko2.innerHTML = 'ok';
  65. 			error = false;
  66. 		}
  67.  
  68. 		if (error) {
  69. 			document.getElementById('submit').setAttribute('disabled', 'disabled');
  70. 		}
  71. 		else {
  72. 			document.getElementById('submit').removeAttribute('disabled', 'disabled');
  73. 		}
  74. 	}
  75.  
  76.  
  77. </script>
  78.  
  79. </head>
  80. <body>
  81.  
  82. <form name="wyslij" action="" method="post">
  83. 	<table>
  84. 		<tr>
  85. 			<td>Imię:</td><td><input type="text" name="imie" /></td>
  86. 		</tr>
  87. 		<tr>
  88. 			<td></td><td id="imie2"></td>
  89. 		</tr>
  90. 		<tr>
  91. 			<td>Nazwisko:</td><td><input type="text" name="nazwisko" /></td>
  92. 		</tr>
  93. 		<tr>
  94. 			<td></td><td id="nazwisko2"></td>
  95. 		</tr>
  96. 		<tr>
  97. 			<td>Adres e-mail:</td><td><input type="text" name="email" /></td>
  98. 		</tr>
  99. 		<tr>
  100. 			<td></td><td id="email2"></td>
  101. 		</tr>
  102. 		<tr>
  103. 			<td>Strona www:</td><td><input type="text" name="strona" /></td>
  104. 			<div id="strona2"></div>
  105. 		</tr>
  106. 		<tr>
  107. 			<td>Temat:</td><td><input type="text" name="temat" /></td>
  108. 			<div id="temat2"></div>
  109. 		</tr>
  110. 		<tr>
  111. 			<td>Treść:</td><td><textarea name="tresc" rows="5"></textarea></td>
  112. 			<div id="tresc2"></div>
  113. 		</tr>
  114. 		<tr>
  115. 			<td><input type="submit" value="Wyślij" id="submit" /></td>
  116. 		</tr>
  117. 	</table>
  118. </form>
  119.  
  120.  
  121. </body>
  122. </html>
[JAVASCRIPT] pobierz, plaintext


Proszę nie patrzeć na kryteria walidacji bo są one prowizoryczne (puste imię, imię krótsze niż 5 znaków i nazwisko tak samo).
Chodzi o to, że jak wpiszę 2 błędne pola to jest ok, blokuje mi przycisk. Jeśli jednak jedno pole uzupełnię dobrze a drugie dalej nie to i tak mogę wysłać formularz, wystarczy że ominę pole niepoprawnie wypełnione. Chcę zrobić tak, żeby jeśli jest przynajmniej 1 źle wypełnione pole to żeby blokowało mi przycisk. Nie wiem jak to osiągnąć. Próbowałem dodać jeszcze 1 zmienną globalną i inkrementować ją jeśli wystąpi błąd, a później warunek, że jeśli ta zmienna jest różna od 0 to żeby blokowało, ale po pierwsze nie za dobrze to działa, po drugie jest to niedobre rozwiązanie. Kombinowałem na parę sposobów ale wynik zostaje taki sam.

Nie proszę o gotowca, raczej nakierowanie (logiczne bądź językowe), bo w końcu mam się nauczyć tego języka a nie żerować na innych. Za wszelkie wskazówki będę niezmiernie wdzięczny. Pozdrawiam.
kalmaceta
24.01.2011, 23:59:23
no bo nie było eventu blur, dodaj dodatkowe sprawdzanie onsubmit

blur jest wtedy, gdy pole dostaje focus i go traci, stad wniosek jak nie dostał to nie stracił

ediit: polecam http://www.alistapart.com/articles/inline-...n-in-web-forms/ oraz http://www.alistapart.com/articles/forward...orm-validation/
Mefiuu
25.01.2011, 16:38:14
hmmmm... Nie bardzo rozumiem. Przecież onblur zachodzi, ale tylko na tych polach, które się wybierze.
Przykładowo: dobrze wypełnię imię, a nazwisko jest źle wypełnione, ale jako że sobie je ominę to i tak mi odblokuje przycisk. Chodzi o to, żeby JavaScript wiedział, pamiętał, że nazwisko jest błędne.

Zrobiłem też formularz cały z onsubmit, ale on wiadomo, działa przy wysyłaniu wiadomości. A mi raczej chodzi o to, żeby było sprawdzane "na żywo".

Tutaj jest ten formularz : formularz . W folderze 'onblur' jest formularz z onblur, a w 'onsubmit' ten drugi winksmiley.jpg

Dziękuję za pomoc.
kalmaceta
27.01.2011, 21:00:10
oblur zachodzi tylko wtedy gdy element traci focus! JavaScript zapamięta wszystko co chcesz tylko napisz co kiedy i gdzie. U Ciebie jest mała pomyłka logiczna, mogę nacisnąć wyślij, poza tym jak w artykułach, do których linki podałem nie blokuj na siłę możliwości wysłania wskaż błędy tylko, przecież o to chodzi - walidacja dalej i tak powinna być.
Mefiuu
27.01.2011, 21:49:54
a możesz mi przybliżyć kawałek kodu gdzie ta pomyłka jest? Bo sam doszukać się nie mogę.

Czyli proponujesz, aby walidować za pomocą onsubmit i pokazywać jakie błędy się popełniło? A oprócz js używać php do sprawdzenia?

pozdrawiam
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.