Question

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()
    {
        $("#login_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>

Answer 1

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.