Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Prosta vaildacja pola
Forum PHP.pl > Forum > Przedszkole
o2w5n778
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:
  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. <title>Twoja opinia</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" href="style.css" />
  6. <script type="text/javascript">
  7. function isNotEmpty(pole){
  8. if(pole.value == ""){
  9. document.getElementById("i"+pole.id).innerHTML = "error";
  10. pole.ClassName = "blad";
  11. return false;
  12. } else {
  13. document.getElementById("i"+pole.id).innerHTML = "ok";
  14. pole.className = "ok";
  15. return true;
  16. }
  17. }
  18. isNotEmpty(pers);
  19. </script>
  20. </head>
  21. <div id="outer">
  22.  
  23. <form id="opinia" action="#" method="get">
  24. <div class="row">
  25. <div class="lr">Imię i nazwisko:</div>
  26. <div class="rr"><input type="text" id="pers" name="pers" /></div>
  27. <div id="ipers" class="info"></div>
  28. </div>
  29. <div>
  30. <div class="submit"><input type="submit" value="Prześlij" /></div>
  31. </div>
  32. </form>
  33.  
  34. </div>
  35. </body>
  36. </html>
Ilware
poprawiony kod :

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

i wywoła to na jakimś wyzwalaczu onBlur , onFocus itp, bez sensu wywoływać sprawdzanie od razu przy ładowaniu strony
o2w5n778
Nie działa :/
kamil4u
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ść.
bzeebzee
Proszę trochę pomocy:

http://www.w3schools.com/js/js_form_validation.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.