How can I make Sprout Invisible Captcha plugin works using AJAX submission?

Question

I set up a custom form template using Sprout Forms and added {{ craft.sproutInvisibleCaptcha.protect() }} inside the <form> tag.

I can see there are several captcha tags added by the plugin, but as I am using AJAX submission:

• How can I make it works using this submission method?
• How do I handle redirect to my 'redirect' location?

I did these tests:

• Prevent a form from being submmitted if a user does not have JavaScript enabled ;
• Block form submissions by robots who auto-fill all of your form fields ;
• Require minimum time to fill out your form ;

All of these tests have failed, spam haven't been caught.

---

This is the captcha field inside custom Sprout Form template:

{{ craft.sproutInvisibleCaptcha.protect() }}
<input type="hidden" name="redirectOnFailure" value="{{ craft.request.getUrl() }}">

And this is the AJAX post inside JS script:

var postUrl  = 'sproutForms/entries/saveEntry',
    formData = {
    action: postUrl,
    handle: 'test',
    fields: {}
};

formData['fields[minPrice]'] = $scope.results.minPrice;
formData['fields[maxPrice]'] = $scope.results.maxPrice;

formData = $.param(formData);

$.ajax({
    type     : 'POST',
    url      : postUrl,
    data     : formData,
    dataType : 'json',
    encode   : true
});

Answer 1

Based on your code - and our comments - you need something like this:

<form id="someFormId">
    <input type="hidden" name="action" value="sproutForms/entries/saveEntry">
    <input type="hidden" name="handle" value="test">
    <input type="hidden" name="redirectOnFailure" value="{{ craft.request.getUrl() }}">
    <!---some more fields-->
    <button type="button" id="sendRequest" value="send">
</form>

and your javascript like

$("#sendRequest").click(function(){
    var formData = $("#someFormId").serialize();
    //proceed with your ajax request 
});

reason: The Plugin checks all your variables in your $_POST request. Depending on the keys in this array it checks for spam. In your request you send none of those fields -> the plugin validation does not trigger. You can check which fields are injected with the {{ craft.sproutInvisibleCaptcha.protect() }} function and add them manually in your request as well but it's easier to just serialize the form. Maybe you have to play around with the action url. I'm used to craft 3 since two months and it could be I messed up the exact parameter in a serialize for craft2