MVC 4 - Captcha.Mvc

Question

I have a Captcha control for my MVC 4 page and I cannot get it to show a message if the input was incorrect. I'm used to doing things through jquery and on success do something, but when I do something like that here I lose the ModelState.IsValid.

So, when I run this code the Captcha control loads fine on the page it shows the 5 letters in an image with a line that says 'Refresh' and a textbox beneath that for input with a submit button on my index page to post to the controller.

When I get input wrong it refreshes the image with no message saying anything was wrong, I know it was wrong because my controller says ModelState.IsValid is false but I want to load a new image and display that the input was incorrect.

When I get input correct it refreshes the image still with no message or anything. I want it to stay there and say that the input was correct and disable the textbox.

My question: How can I do what I described above?

My code is below:

Controllers/HomeController.cs

using System.Web.Mvc;
using CaptchaDemo.MVC4.ViewModels;
using CaptchaMvc;
using CaptchaMvc.Attributes;
using CaptchaMvc.Infrastructure;

namespace CaptchaDemo.MVC4.Controllers
{
    public class HomeController : Controller
    {
        // GET: /Home/

        public ActionResult Index()
        {
            CaptchaUtils.CaptchaManager.StorageProvider = new CookieStorageProvider();
            ViewBag.Title = "Captcha MVC 4 Demo";
            return View();
        }

        public ActionResult _Captcha()
        {
            CaptchaViewModel model = new CaptchaViewModel();
            return View(model);
        }

        public ActionResult AjaxForm()
        {
            return View(new CaptchaViewModel());
        }

        [HttpPost, CaptchaVerify("Captcha is not valid")]
        public ActionResult AjaxForm(CaptchaViewModel model)
        {
            if (ModelState.IsValid)
            {
                ModelState.Clear();
                TempData["Message"] = "Message: captcha is valid.";
                model.strMessage = "efefwf";
                if (Request.IsAjaxRequest())
                    return PartialView("_Captcha", model);
                    //return Json(model, JsonRequestBehavior.AllowGet);
                return View(model);
            }

            TempData["ErrorMessage"] = "Error: captcha is not valid.";
            if (Request.IsAjaxRequest())
                return PartialView("_Captcha", model);
            return View(model);
        }

    }
}

ViewModels/CaptchaViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CaptchaDemo.MVC4.ViewModels
{
    public class CaptchaViewModel
    {
        public string strMessage { get; set; }
    }
}

Views/Home/Index.cshtml

@using (Html.BeginForm("AjaxForm", "Home", FormMethod.Post, new { @id = "AjaxCaptchaForm", @class = "ajax" }))
{
    <div id="update">@Html.Partial("_Captcha")</div>
    <input type="submit" />
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#AjaxCaptchaForm').submit(function () {
            $.post($(this).attr("action"), $(this).serialize(), function (results) {
                $("#update").html(results);
            });

            return false;
        });
    });
</script>

Views/Shared/_Captcha.cshtml

@using CaptchaMvc.HtmlHelpers
@model CaptchaDemo.MVC4.ViewModels.CaptchaViewModel

@Html.ValidationSummary(true)
@Html.ValidationMessageFor(model => model.strMessage)
@Html.Captcha(5)
<span>@Model.strMessage</span>

Answer 1

In case someone still need help with this:

There are two options one:

  @Html.Captcha("Refresh", "Captcha is not valid "
         , 4, "The Captcha is required", true)

The last true set the bool addValidationSpan.

Another option:

<span class="field-validation-valid text-danger" data-valmsg-for="CaptchaInputText" data-valmsg-replace="true" id="vali_CaptchaInputText"></span>
 <span class="field-validation-valid text-danger" data-valmsg-for="CaptchaDeText" data-valmsg-replace="true" id="vali_CaptchaDeText"></span>

Also the <script src="~/Scripts/jquery-2.1.4.js"></script> need to be loaded before this line is rendered.

Answer 2

@Html.Captcha(5) renders an input with id="CaptchaInputText". To display a native warning message you need to append you model with CaptchaInputText property and add

@Html.ValidationMessageFor(m => m.CaptchaInputText, String.Empty, new { @class = "validation-error", @style = "color:red;" })

into your view.