Validating Recaptcha before firing ajaxForm

Question

I have a form where I have added a Recaptcha which works fine, but I would like to add a check/validation on the Recaptcha before form is submitted via ajaxForm.

I have a piece of jquery code that validates the Recaptcha before submitted and it works, but this does not work well in conjunction with the ajaxForm.

$("form").submit(function(event) {

   var testrecaptcha = $("#g-recaptcha-responser").val();
   if (testrecaptcha === "") {
      event.preventDefault();
      $("#recaptcha").show();
   }
});

Below is my code that fires when the form is submitted:

$('document').ready(function()
    {
        $('#quoteform').ajaxForm( {
            target: "#previews",
            success: function (msg2) {
            $("#main_body").hide();
            $("#recaptcha").hide();
            $("#main_footer").hide();
            $("#previews").show();
            setTimeout(function() { $('#quote_modal').modal('hide'); }, 2500);
            },
    });
});

My form looks like this:

<form action="/pages/addquote.php?country=en" class="quoteform" id="quoteform" method="post" name="quoteform">
    <input name="productId" type="hidden" value="28">
    <div class="modal-body" id="previews" style="min-height:100px; padding-top:10px; display:none"></div>
    <div class="modal-body" id="main_body">
        <div class="form-group">
            <label for="UserNavn">Name:</label> <input class="form-control" id="UserNavn" name="email_navn" placeholder="Type Name" type="text" value="123">
        </div>
        <div class="form-group">
            <label for="UserFirma">Company:*</label> <input class="form-control" id="UserFirma" name="email_firma" placeholder="Type Company" required="" type="text" value="123">
        </div>
        <div class="form-group">
            <label for="UserEmail">E-mail:*</label> <input class="form-control" id="UserEmail" name="email_email" placeholder="Type E-mail" required="" type="email" value="email@email.com">
        </div>
        <div class="form-group">
            <label for="UserTlf">Phone:</label> <input class="form-control" id="UserTlf" name="email_tlf" placeholder="Type Phone" type="text" value="">
        </div>
        <div class="modal-footer" id="main_footer">
            <div class="g-recaptcha" data-sitekey="6LddZxQUAAAAADvGJMv-aQxBiX62fwCRjPtzw2yv" id="g-recaptcha-responser"></div>
            <div class="col-xs-12 col-sm-6 text-left" id="recaptcha" style="color:red; display: none">
                <i aria-hidden="true" class="fa fa-exclamation-triangle"></i> Please verify that you are a human
            </div><button class="btn btn-success" onclick="ga('send','pageview','/quote-submit');" type="submit">Send enquiry</button>
        </div>
    </div>
</form>

I have tried some different setups but I just cannot seem to combine the recaptcha validation into the ajaxForm so the recaptcha is tested before the form is submitted. How can this be done?

Thank you very much in advance

------ UPDATE ----

I have successfully implemented the beforeSubmit and now I seem to be able to validate before submitting. Great!

I would like to validate my recaptcha but I just can't seem to be able to validate the "correctCaptcha", as I list below. I would want for the correctCaptcha to contain the value instead of the alert and then be able to validate on this variable in the beforeSubmit.

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>

var correctCaptcha = function(response) {
        alert(response);
    };

This is what I have:

var correctCaptcha = function(response) {
            alert(response);
        };
$('document').ready(function()
    {
        $('#quoteform').ajaxForm( {

            beforeSubmit: function (arr, $form, options) {
            if (correctCaptcha === "") {
            alert("Please check the recaptcha to verify that you are a human");
            return false;
            },

            target: "#previews",
            success: function (msg2) {
            $("#main_body").hide();
            $("#recaptcha").hide();
            $("#main_footer").hide();
            $("#previews").show();
            setTimeout(function() { $('#quote_modal').modal('hide'); }, 2500);
            },
    });
});

Answer 1

Read the docs (I assume this is the right plugin) http://jquery.malsup.com/form/#options-object. Handle the beforeSubmit event and put your validation logic in there including the recaptcha. Return false to cancel the submission if it's invalid.

You can use something like this in your beforeSubmit:

if (grecaptcha.getResponse() == "") { 
  $("#recaptcha").show(); 
  return false; 
}