Podczas rejestracji w dowolnym serwisie wpisane hasło należy powtórzyć w celu wyeliminowania literówek. Najczęściej obok pola, w którym wpisuje się hasło ponownie, pojawia się znaczek, który informuje, czy wpisane hasła są identyczne. W tym poradniku napiszę jak samemu wykonać taki skrypt.

Podczas rejestracji w dowolnym serwisie wpisane hasło należy powtórzyć w celu wyeliminowania literówek. Najczęściej obok pola, w którym wpisuje się hasło ponownie, pojawia się znaczek, który informuje, czy wpisane hasła są identyczne. W tym poradniku napiszę jak samemu wykonać taki skrypt.

Na początku dostosujemy do skryptu formularz. Pola, w które wpiszemy hasło muszą posiadać atrybuty id. Drugie pole będzie zawierało dodatkowo atrybut onchange. Powinno to wyglądać mniej więcej tak:

<input type="password" name="pass" id="pass" />
<input type="password" name="repPass" id="repPass" onchange="validate_pass('pass','repPass')" /><div id="ok" style="display:none;"><p>OK</p></div><div id="false" style="display:none;"><p>ŹLE</p></div>

W kodzie znalazły się dla bloki div. Funkcja będzie zmieniała znacznik display w zależności od jej wyniku. Dlatego, kiedy wpisane hasła będą identyczne, wyświetli się napis "OK", a kiedy będą różne, "ŹLE".

Teraz przyszedł czas na kod funkcji.

function validate_pass(p,r) {
if (document.getElementById(p).value!=document.getElementById(r).value) {
document.getElementById('false').style.display='block';
document.getElementById('ok').style.display='none';
} else {
document.getElementById('false').style.display='none';
document.getElementById('ok').style.display='block';
}
}

Na koniec kilka słów na temat kodu. Do funkcji są przekazywane dwie zmeinne: p i r. Pierwsza przechowuje id pola, w którym hasło jest wpisywane po raz pierwszy, a druga - po raz drugi.

W funkcji następuje porównanie zawartości obu pól. Jeśli wartości są różne, blok div o id równym false, zostaje wyświetlony, a ten o id równym ok - ukryty (przecież funkcja mogła być wcześniej użyta). Jeśli hasła są takie same, dzieje się na odwrót.

Tych, którzy nie wiedzą gdzie załączyć kod funkcji, kieruję do poradnika: Walidacja formularzy w JavaScript.