[JS] Porównanie haseł w formularzu

[Cabalerio 0]

Wczoraj zacząłem się uczyć javascripta i napotkałem na dość dziwny dla mnie problem. Chciałem zrobić skrypt który będzie porównywał 2 hasła i wyświetlał komunikat jeszcze zanim się potwierdzi formularz. Zrobiłem więc proste zdarzenie:

 

function sprawdz_hasla()
{
var div = document.getElementById('poprawnosc'); 
var f = document.forms['formularz'];

haslo = f.haslo.value;
haslo2 = f.haslo2.value;

if((haslo != undefined ) && (haslo2 != undefined))
{
	if(haslo == haslo2)
	{
		div.innerHTML= 'Hasła są poprawne';
		div.style.background='#00ff00';
		blad_hasla = 0;	
	}
	else
	{
		div.innerHTML= 'Hasła nie są identyczne';
		div.style.background='#ff0000';
		blad_hasla = 1;
	}
}
}

 

Przypisane jest ono do pól w ten sposób:

 

<td>
<input onkeyup="sprawdz_hasla()" type="password" name="haslo"/>					
</td>
<td>
<input onkeyup="sprawdz_hasla()" type="password" name="haslo2"/>					
</td>

 

Denerwuje mnie fakt, że skrypt wypisuje mi błąd o niepoprawności haseł jeszcze zanim wpisze drugie hasło. Chciałbym żeby skrypt poczekał, aż oba hasła będą wypełnione. Nie wiem co zmienić, żeby to poprawić.

[BlackBishop 1]

daj sprawdz_hasla pod jakiś osobny guzik (np. dalej) a nie onchange z pól edit

[Cabalerio 0]

Nie podoba mi się ta myśl, to ma wyglądać tak jak pod tym linkiem: Rejestracja WP

Chciałbym żeby to się sprawdzało automatem. Przy okazji zerżnąłem pomysł z onkeyup="sprawdz_hasla()" teraz działa wiele dynamiczniej, ale wciąż nie tak jak bym chciał.

[januzi 24]

to jeszcze dodaj != ''

[Cabalerio 0]

Przerobiłem funkcję tak:

 

function sprawdz_hasla()
{
var div = document.getElementById('poprawnosc'); 
var f = document.forms['formularz'];

haslo = f.haslo.value;
haslo2 = f.haslo2.value;

if((haslo != 'undefined' ) && (haslo2 != 'undefined')) // - nie działa
{
	if(haslo.value.length > 4) // - nie działa
	{
		if(haslo == haslo2)
		{
			div.innerHTML= 'Hasła są poprawne';
			div.style.background='#00ff00';
			blad_hasla = 0;	
		}
		else
		{
			div.innerHTML= 'Hasła nie są identyczne';
			div.style.background='#ff0000';
			blad_hasla = 1;
		}
	}
	else
	{
		div.innerHTML= 'Hasła są zbyt krótkie';
		div.style.background='#ff0000';
		blad_hasla = 1;
	}
}
}

 

No i oczywiście teraz nie działa w ogóle. Te części kodu co zaznaczyłem według mnie w ogóle się nie wykonują albo bugują cały skrypt. Czuje się jak jakiś nowicjusz...

[209458 867]

Najpierw musisz podjąć decyzję projektową jak rozpoznasz, że użytkownik już skończył pisać. Możesz np. użyć zdarzenia onblur (walidacja odpali się gdy użytkownik w jakiś sposób "wyjdzie" z pola (np. wciśnie tab, albo kliknie myszka poza polem). Możesz też zrobić warunek w rodzaju braku wciśniętego klawisza, przez x sekund, ale to dużo trudniej obkodować.

[Cabalerio 0]

Trudność nie gra roli, ma być zrobione idealnie bez kompromisów. Przyznam szczerze, że nie pomyślałem o tej drugiej możliwości, a zapowiada się dość dobrze. Wieczorem postaram się napisać coś od nowa.

[209458 867]

No to jak się zabierasz za odczekiwanie to poczytaj o funkcjach setTimeout i clearTimeout.