Forum PHP.pl > [HTML][JavaScript] Prosta vaildacja pola

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][JavaScript] Prosta vaildacja pola

o2w5n778

11.01.2012, 14:36:05

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Twoja opinia</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		function isNotEmpty(pole){
			if(pole.value == ""){
				document.getElementById("i"+pole.id).innerHTML = "error";
				pole.ClassName = "blad";
				return false;
			} else {
				document.getElementById("i"+pole.id).innerHTML = "ok";
				pole.className = "ok";
				return true;
			}
		}
		isNotEmpty(pers);
	</script>
</head>
<body>
<div id="outer">
 
<form id="opinia" action="#" method="get">
	<div class="row">
		<div class="lr">Imię i nazwisko:</div>
		<div class="rr"><input type="text" id="pers" name="pers" /></div>
		<div id="ipers" class="info"></div>
	</div>
	<div>
		<div class="submit"><input type="submit" value="Prześlij" /></div>
	</div>
</form>
 
</div>
</body>
</html>
[HTML] pobierz, plaintext

Ilware

11.01.2012, 14:44:33

poprawiony kod :

[HTML] pobierz, plaintext 
function isNotEmpty(pole){
                        var elem = document.getElementById(pole );  
			if(elem.value == ""){
				document.getElementById("ipers").innerHTML = "error";
				elem .ClassName = "blad";
				return false;
			} else {
				document.getElementById("ipers").innerHTML = "ok";
				elem.className = "ok";
				return true;
			}
		}
[HTML] pobierz, plaintext

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

o2w5n778

11.01.2012, 14:58:28

Nie działa :/

kamil4u

11.01.2012, 15:10:19

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

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

11.01.2012, 22:09:15

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.