Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z walidacją
Mefiuu
post
Post #1





Grupa: Zarejestrowani
Postów: 371
Pomógł: 18
Dołączył: 23.11.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
kalmaceta
post
Post #2





Grupa: Zarejestrowani
Postów: 183
Pomógł: 24
Dołączył: 4.12.2010

Ostrzeżenie: (0%)
-----

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/

Ten post edytował kalmaceta 25.01.2011, 00:03:12


--------------------
kAlmAcetA
Go to the top of the page
+Quote Post
Mefiuu
post
Post #3





Grupa: Zarejestrowani
Postów: 371
Pomógł: 18
Dołączył: 23.11.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
kalmaceta
post
Post #4





Grupa: Zarejestrowani
Postów: 183
Pomógł: 24
Dołączył: 4.12.2010

Ostrzeżenie: (0%)
-----

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


--------------------
kAlmAcetA
Go to the top of the page
+Quote Post
Mefiuu
post
Post #5





Grupa: Zarejestrowani
Postów: 371
Pomógł: 18
Dołączył: 23.11.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 15:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn