integrating ajax jquery with google recaptcha

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Daniel Serajian-Bates 2 posts 72 karma points

Jan 19, 2020 @ 17:44

0

Integrating Ajax jQuery with Google Recaptcha

Using Umbraco And Getting Started

Umbraco 8

Can anybody please advise the best way of implementing the following blog "https://youtu.be/hH3iNf52GNU" with this type of contact form - "https://codeshare.co.uk/blog/how-to-add-recaptcha-to-an-mvc-form/". Having issues updating the reCaptcha with the JQuery! Thanks in advance

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Jan 20, 2020 @ 11:07

0

Hi Daniel

Can you post your code? What the issue exactly is?

Thanks,

Alex

Copy Link
Daniel Serajian-Bates 2 posts 72 karma points

Jan 20, 2020 @ 11:23
0
Hi Alex, thanks for getting back to me on this.

Here is my controller method:

public ActionResult SubmitForm(ContactViewModel model) { bool success = false;
```
        RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();
        if (string.IsNullOrEmpty(recaptchaHelper.Response))
        {
            ModelState.AddModelError("reCAPTCHA", "Please complete the reCAPTCHA");
            return CurrentUmbracoPage();
        }
        else
        {
            RecaptchaVerificationResult recaptchaResult = recaptchaHelper.VerifyRecaptchaResponse();
            if (recaptchaResult != RecaptchaVerificationResult.Success)
            {
                ModelState.AddModelError("reCAPTCHA", "The reCAPTCHA is incorrect");
                return CurrentUmbracoPage();
            }
        }

        if (ModelState.IsValid)
        {
            success = _smtpService.SendEmail(model);
        }

        var contactPage = UmbracoContext.Content.GetById(false, model.ContactFormId);

        var successMessage = contactPage.Value<IHtmlString>("successMessage");
        var errorMessage = contactPage.Value<IHtmlString>("errorMessage");

        return PartialView("~/Views/Partials/Contact/_Result.cshtml", success ? successMessage : errorMessage);
    }
```
Followed by my partial view:

@using (Ajax.BeginForm("SubmitForm", "ContactSurface", new AjaxOptions() { UpdateTargetId = "form-result", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnSuccess = "contactForm.showResult", OnFailure = "contactForm.showResult" }, new { id = "contact-form" })) { @Html.HiddenFor(m => m.ContactFormId)

First Name @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "First Name...", @style = "font-size: 19px" }) @Html.ValidationMessageFor(m => m.FirstName)

Last Name @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", placeholder = "Last Name...", @style = "font-size: 19px" }) @Html.ValidationMessageFor(m => m.LastName)

Email @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email...", @style = "font-size: 19px" }) @Html.ValidationMessageFor(m => m.Email)

Message @Html.TextAreaFor(m => m.Message, new { @class = "form-control", placeholder = "Message...", rows = "8", @style = "resize: none; font-size: 19px", maxlength = 1000 }) @Html.ValidationMessageFor(m => m.Message)

@Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)

}

FInally, my js file:

var contactForm = contactForm || { init: function () { this.listeners(); }, listeners: function () { $(document).on('click', '.contact-submit', function () { e.preventDefault(); var form = $("#contact-form"); form.submit(); }); }, showResult: function () { $('#form-result').hide("slow"); $('#form-result').show('slow'); } }

So the issue I am facing is updating the google captcha to inform the user that it is either incomplete or incorrect. However, it appears that returning the CurrentUmbracoPage(); in the controller is not working inside the partial view ajax.

Any ideas would be much appreciated thanks. (apologies for formatting of code)
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?