Kako implementirati?

Na tej strani bomo predstavili kako uporabiti jQuery SliderCaptcha pri preverjanju vnosnega obrazca. Pri tem gre za preprosto implementacijo v JavaScriptu, pri čemer uporabimo še knjižnice jQuery, Bootstrap in Font Awesome.

Primer delovanja

Uvoz zbirk

Najprej je potrebno uvoziti zbirke za jQuery, Bootstrap in Font Awesome. To storimo z dodajo sledečega izseka kode v glavo HTML dokumenta:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script>

Nato je potrebno dodati še povezavo do SliderCaptcha datotek, ki jih prenesemo iz tega mesta in jih dodamo na naš strežnik. Povezavo do datotek ustvarimo z dodajo naslednjega izseka kode v glavo dokumenta:

<link href="slidercaptcha.css" rel="stylesheet">
<script src="longbow.slidercaptcha.js"></script>

Prikaz in odziv ob uspešni izvedbi

Za prikaz je v kodo potrebno dodati div element z atributom id, katerega vrednost je nastavljena na captcha. To vrednost lahko sicer tudi spremenimo v datoteki longbow.slidercaptcha.js.
<div id="captcha"></div>

Sedaj je potrebno definirati še kaj se naj zgodi ob uspešno prestanem izzivu. To storimo z definiranjem funkcije onSuccess. Orodje nam omogoča tudi, da definiramo kaj se zgodi v primeru napake ali osvežitve gradnika. Več o tem bomo izvedeli v naslednjih poglavjih.

$('#captcha').sliderCaptcha({
  onSuccess: function () {
    //Definiraj odziv
  }
});

Celoten primer kode

V spodnjem primeru lahko najdemo vse gradnike, ki smo jih spoznali do sedaj. Nadgradili smo ga tako, da smo orodje CAPTCHA vključili v del obrazca. Dokler se CAPTCHA ne opravi uspešno, je gumb za potrditev forme neaktiven. 

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script>

    <link href="slidercaptcha.css" rel="stylesheet">
    <script src="longbow.slidercaptcha.js"></script>
</head>

<body>
    <form action="">
        Vpiši svoje ime:
        <input type="text" required="required" placeholder="Ime" id="nameF" />
        <div id="captcha"></div>
        <button id="submitB" disabled>Potrdi</button>
    </form>
    <script>
        $('#captcha').sliderCaptcha({
            onSuccess: function() {
                document.getElementById("submitB").disabled = false;
            }
        });
        $("#submitB").on("click", function() {
            alert("Pozdravljen " + $("#nameF").val());

        });
    </script>
</body>