How do I make my form work with reCAPTCHA?

Asked

Viewed 199 times

3

I am saving the data by Ajax, however my reCaptcha is not working properly, the form is sent even without pressing inside the Captcha.

My Controller

  [HttpPost]
  [CaptchaValidator(PrivateKey= "secretKey", ErrorMessage="Captcha 
    Invalido", RequiredMessage ="Campo Obrigatorio")]

  public ActionResult SalvarItens(string titulo, string video_url, string 
     thumb, bool captchaValid) 
    {
         var item = new Dados_Video()
            {
                Thumb = thumb,
                Titulo = titulo,
                UrlVideo = video_url
            };

            db.Dados_Video.Add(item);
            db.SaveChanges();


        return Json(new { Resultado = item.Id }, 
           JsonRequestBehavior.AllowGet);
    }

my View

   @using reCAPTCHA.MVC;


   <form id="submeter">
            <p id="divulgueSeuVideo">Divulgue Seu Vídeo</p><br />
            <input type="text" id="titulo" name="titulo" required="" 
  class="form-control form-home" placeholder="Titulo" /><br />

            <input type="url" id="video-url" name="url" required="" class="form-control form-home" placeholder="url" /><br />

            <div class="g-recaptcha" data-sitekey="minhaKey"></div>
            @Html.ValidationMessage("reCAPTCHA")

            <button id="submit" class="btn-block btn-success" onclick="funcaoOnclick();">Enviar Video</button>
        </form>

Ajax who makes the sage

   function SalvarItens() {

        var titulo = $("#titulo").val();
        var video_url = $("#video-url").val();
        var thumb = generateThumb(generateCode(video_url));
        var url = "/Home/SalvarItens";

        $.ajax({
            url: url
            , data: {
             titulo: titulo, video_url: video_url, thumb: thumb }
            , type: "POST"
            , datatype: "Json"
            , success: function (data) {
                if (data.Resultado > 0) {

                }
            }
        });
    }

Web.Config

  <add key="reCaptchaPublicKey" value="SiteKey" />
  <add key="reCaptchaPrivateKey" value="SecretKey" />
javascript c# asp.net-mvc ajax asp.net

  • you can validate in the controller to check if it is valid even, take a look at this example: reCaptcha

  • As I recall, the reCaptcha validation should be done on the server, and for that your call ajax should be sending the "inputs" of reCaptcha in addition to other fields like title, video_url, etc.

  • more like caught the value of the imput of reCaptcha?

  • in your post’s Json, you shouldn’t include captchaValid either?

1 answer

0

Since you need to use ajax instead of the standard form Submit, a simple way that I see to do this is like this:

var formData = $('#submeter').serializeArray()[0];
formData.Titulo = $("#titulo").val();
formData.UrlVideo = $("#video-url").val();
formData.Thumb = generateThumb(generateCode(formData.video_url));
var url = "/Home/SalvarItens";

$.ajax({
    url: url
    , data: formData
    , type: "POST"
    , datatype: "Json"
    , success: function(data) {
        if (data.Resultado > 0)
        {

        }
    }
});

This will keep the hash generated by reCaptcha when it is solved inside the object formData. With that, the attribute CaptchaValidator in your action you should be able to validate reCaptcha and parameter captchaValid should come with the right value.

In action, put this code:

[HttpPost]
[CaptchaValidator(PrivateKey= "secretKey", ErrorMessage="Captcha 
Invalido", RequiredMessage ="Campo Obrigatorio")]
public ActionResult SalvarItens(Dados_Video item, bool captchaValid)
{
    db.Dados_Video.Add(item);
    db.SaveChanges();

    return Json(new { Resultado = item.Id }, JsonRequestBehavior.AllowGet);
}

Browser other questions tagged javascript c# asp.net-mvc ajax asp.net

You are not signed in. Login or sign up in order to post.