MVC 4 - Captcha.Mvc
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.
JohnAtrik
Updated on June 04, 2022Comments
-
JohnAtrik almost 2 years
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>