Gyakran látott és alkalmazott funkcióról van szó. A kényelmi haszna, hogy a felhasználók nem az űrlap beküldése után tudják meg ha a begépelt két jelszó nem egyezik, hanem már a kitöltés közben információt kapnak róla, hogy elgépelték-e a jelszó megerősítését.
Nem szükséges nagy háttértudás a megvalósításhoz, tehát akár kezdő webmesterek is könnyedén be tudják építeni a weboldalukba ezt a funkciót.
A jQuery
Többször utaltam már rá, hogy érdemes a Google szervereiről betölteni. Egyrészt biztosan gyorsabb a szerverük mint a miénk, másrészt ha már egy másik oldal ugyan így tett, akkor a böngésző gyorsítótárában már megtalálható és nem fogja újra letölteni.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></code>
A Form
Nézzük a példánkhoz tartozó formunkat.
<input type="password" id="password" />
<input type="password" id="password2" />
<div id="passwordinfo"></div>
Itt azt érdemes megjegyezni, hogy az egyes mezőknek ID-t adunk, ezek alapján fogjuk elvégezni a mezők beazonosítását.
A JS
function jelszavakMegegyeznek() {
// beolvassuk a két a értéket
var password = $("#password").val();
var password2 = $("#password2").val();
// összehasonlítjuk a két jelszót
if (password != password2) {
// ha nem egyeznek meg
$("#passwordinfo").html("Nem egyeznek meg a jelszavak!");
} else {
// ha a két érték megegyezik
$("#passwordinfo").html("A jelszavak megegyeznek.");
}
// majd a document ready-ben
$(document).ready(function () {
$("#password2").keyup(jelszavakMegegyeznek);
});
Megjegyzem a .keyup()
a billentyű felengedése után fut le, tehát gépelés közben is ellenőriz. Ha csak később, például a következő mezőbe való kattintáskor kívánjuk ellenőrizni, akkor használhatjuk a .focusout()
függvényt is.
Gyakorlatban
Én általában két divet szoktam alkalmazni, ahol mindkettőnek más hátteret definiál a CSS. Majd az összehasonlítás során a JS elrejti és megjeleníti őket, ezzel jelezve, hogy a két jelszó megegyezik-e vagy sem. Persze módosíthatjuk a CSS-t is jQuery-vel. (A két div kezdőállapota persze display: none;
)
if (password != password2) {
$("#passwordinfoOk").hide();
$("#passwordinfoFail").show();
} else {
$("#passwordinfoFail").hide();
$("#passwordinfoOk").show();
}