开发者

Jquery and Captcha on same page can't get it working

I warn you now very little experience at jquery. My question is this. I have a username and password form. I have Jquery that accesses a php page looks into the database matches the password and user name then echos "yes" or no based off if the input is right then takes me to the next page. Now since this Jquery works on submit I can't figure out how to add a javascript captcha correctly to the page because it wont verify the word. So I'm wondering how to alter or add to this code so that I can first verify the word using javascript then the jquery below. Any help would be appreciated thanks.

<script language="javascript">
    $(document).ready(function()
    {
        $("#lo开发者_高级运维gin_form").submit(function()
        {
            //remove all the class add the messagebox classes and start fading
            $("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
            //check the username exists or not from ajax
        $.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
            {
              if(data=='yes') //if correct login detail
              {
                $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
                { 
                  //add message and change the class of the box and start fading
                  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
                  function()
                  { 
                     //redirect to secure page
                     document.location='edujob.php';
                  });
                });
              }
              else 
              {
                $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
                { 
                  //add message and change the class of the box and start fading
                  $(this).html('incorrect').addClass('messageboxerror').fadeTo(900,1);
                });     
              }

            });
            return false; //not to post the  form physically
        });
        //now call the ajax also focus move from 

    });
    </script>


I doubt you can have a client-side-only captcha, server side has to be involved somehow to match scrambled word with what user entered. If match was happening on client side it would mean that a bot could get access to the original word and pass for human.

What captcha do you use? Any plugin or something home-made?


Client-side captcha is useless because it can be by-passed by the end-user. I'd recommend you to use a captcha library. For instance, reCAPTCHA is a very simple and strong server-side library maintained by Google which is easy to implement (reCAPTCHA PHP Docs).

Once it is implemented, I'd change the javascript ajax call with this:

$.ajax({
  url: "ajax_login.php",
  type: "text",
  dataType: "string",
  data: $("#login_form").serialize(),
  success: function(data) {
    if(data === "yes") {
      // DO SOMETHING
    } else {
      // DO SOMETHING

      // Reload reCAPTCHA
      if(typeof Recaptcha === "object") {
        Recaptcha.reload();
      }

    }
  }
});

That's what I think is the best solution.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜