Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript] Prosta vaildacja pola
o2w5n778
post 11.01.2012, 14:36:05
Post #1





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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

Witam!
Dopiero co zaczynam moją przygodę z JavaScript. Chciałem napisać prostą funkcję która sprawdzała by mi czy podane pole nie jest puste, niestety coś skopałem i nie działa. Oto kod:
[HTML] 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">
  3. <head>
  4. 	<title>Twoja opinia</title>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 	<link rel="stylesheet" href="style.css" />
  7. 	<script type="text/javascript">
  8. 		function isNotEmpty(pole){
  9. 			if(pole.value == ""){
  10. 				document.getElementById("i"+pole.id).innerHTML = "error";
  11. 				pole.ClassName = "blad";
  12. 				return false;
  13. 			} else {
  14. 				document.getElementById("i"+pole.id).innerHTML = "ok";
  15. 				pole.className = "ok";
  16. 				return true;
  17. 			}
  18. 		}
  19. 		isNotEmpty(pers);
  20. 	</script>
  21. </head>
  22. <body>
  23. <div id="outer">
  24.  
  25. <form id="opinia" action="#" method="get">
  26. 	<div class="row">
  27. 		<div class="lr">Imię i nazwisko:</div>
  28. 		<div class="rr"><input type="text" id="pers" name="pers" /></div>
  29. 		<div id="ipers" class="info"></div>
  30. 	</div>
  31. 	<div>
  32. 		<div class="submit"><input type="submit" value="Prześlij" /></div>
  33. 	</div>
  34. </form>
  35.  
  36. </div>
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


--------------------
https://pajlo.pl/
Go to the top of the page
+Quote Post
Ilware
post 11.01.2012, 14:44:33
Post #2





Grupa: Zarejestrowani
Postów: 248
Pomógł: 31
Dołączył: 14.12.2010
Skąd: Wrocław

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

poprawiony kod :

[HTML] pobierz, plaintext 
  1. function isNotEmpty(pole){
  2.                         var elem = document.getElementById(pole );  
  3. 			if(elem.value == ""){
  4. 				document.getElementById("ipers").innerHTML = "error";
  5. 				elem .ClassName = "blad";
  6. 				return false;
  7. 			} else {
  8. 				document.getElementById("ipers").innerHTML = "ok";
  9. 				elem.className = "ok";
  10. 				return true;
  11. 			}
  12. 		}
[HTML] pobierz, plaintext

i wywoła to na jakimś wyzwalaczu onBlur , onFocus itp, bez sensu wywoływać sprawdzanie od razu przy ładowaniu strony


--------------------
Jeżeli pomogłem kliknij "Pomógł" :)
Go to the top of the page
+Quote Post
o2w5n778
post 11.01.2012, 14:58:28
Post #3





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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

Nie działa :/


--------------------
https://pajlo.pl/
Go to the top of the page
+Quote Post
kamil4u
post 11.01.2012, 15:10:19
Post #4





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Ten kod ma wiele błędów, a nie tylko ten wskazany przez ~Ilware. No, ale że się uczysz to można Ci wybaczyć( kod jest ładnie napisany, a często wśród początkujących programistów JS jest on tragiczny ):
1.
Cytat
isNotEmpty(pers);
Przy wywołaniu funkcji przekazujesz id elementu. ID jest tekstem, więc musisz go przekazać jako string, czyli w "
2. ~Ilware pokazał Ci jaką linię dopisać, żeby pobrać element i dopiero wtedy na nim operować
3. Nie .ClassName ,a .className
4. W ogóle skrypt nie odnajdzie elementu i nie będzie mógł wykonywać na nim żadnych operacji - to najważniejszy błąd. Chodzi o to, że... najpierw przeczytaj co to jest DOM( http://kurs.browsehappy.pl/Definicja/DOM ), a teraz w skróci wyjaśniając żeby znaleźć element czy wykonać na nim operację musi on być załadowany w drzewie DOM. Odbywa się to wielu przypadkach, ale najczęstsze to:
-
Kod
<span>element 1<span>
        <script>
            //w tym miejscu możesz operować na "element 1", ale "element 2" nie ma w drzewie DOM
        </script>
<span> element 2</span>

- używając odpowiednich zdarzeń np. onload lub onlick( żeby kliknąć na element, musi on być już załadowany, więc sprawa się rozwiązuje sama )
5. Zastosuj się do rady ~Ilware odnośnie onblur -> wtedy DOM będzie już załadowane

To chyba tyle. W razie pytań... pytaj smile.gif
Pozdrawiam

--edit--
Nigdy na forum nie pisz "nie działa", bo to żadna wskazówka. Jeśli już pokaż co wskazuje konsola błędów. Jak próbowałeś samemu poprawić kod itd. - taka rada na przyszłość.

Ten post edytował kamil4u 11.01.2012, 15:11:31


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
bzeebzee
post 11.01.2012, 22:09:15
Post #5





Grupa: Zarejestrowani
Postów: 38
Pomógł: 3
Dołączył: 25.12.2011

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

Proszę trochę pomocy:

http://www.w3schools.com/js/js_form_validation.asp
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 13.06.2025 - 05:10
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn