Проверка Recaptcha перед запуском ajaxForm

Question

У меня есть форма, где я добавил Recaptcha, который отлично работает, но я хотел бы добавить проверку/проверку на Recaptcha, прежде чем форма будет отправлена ​​через ajaxForm.

У меня есть кусок кода jquery, который проверяет Recaptcha перед отправкой, и он работает, но это не работает хорошо в сочетании с ajaxForm.

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

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

Ниже приведен код, который срабатывает, когда форма была отправлена:

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

Моя форма выглядит следующим образом:

<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> 

Я попробовал несколько различных установок, но я просто не могу для объединения проверки recaptcha в ajaxForm, чтобы recaptcha был протестирован до отправки формы. Как это может быть сделано?

Большое спасибо заранее

------ UPDATE ----

Я успешно реализовал beforeSubmit и теперь я, кажется, чтобы быть в состоянии проверить перед отправкой. Большой!

Я хотел бы подтвердить мою рекомендацию, но я просто не могу подтвердить правильность «правильногоКапчета», как я перечислю ниже. Я хотел бы, чтобы для правильногоCaptcha было указано значение вместо предупреждения, а затем можно проверить эту переменную в beforeSubmit.

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

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

Это то, что у меня есть:

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

Прочитайте документацию (я предполагаю, что это правильный плагин) http://jquery.malsup.com/form/#options-object. Обработайте событие beforeSubmit и включите логику проверки, включая recaptcha. Верните false, чтобы отменить отправку, если она недействительна.

Вы можете использовать что-то вроде этого в вашем beforeSubmit:

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