jQuery két jelszó összehasonlítása gépelés közben

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();
}

​