ReCaptcha MVC razor Validation Message not getting triggered - asp.net-mvc

Question

I am fairly new to MVC and a little stumped on this one.
I implemented ReCaptcha last night in my Umbraco MVC 4 application (6.1.6).
ReCaptcha works, the controller gets the correct captcha valid state and all is good. The problem is when the captcha is incorrect, I set the ModelState.AddModelError(string, string) and return the model in order to show that the captcha entered as incorrect, but the view never triggers the Html.ValidateMessage("captcha-error") to show the actual error message updated in the ModelState.
Any help or advice would be appreciated
Controller:
[HttpPost]
[RecaptchaControlMvc.CaptchaValidator]
public ActionResult SubmitContactFormAction(Models.ContactFormModel model, bool captchaValid, string captchaErrorMessage)
{
if (!captchaValid)
{
ModelState.AddModelError("captcha-error", captchaErrorMessage);
return View(model);
}
else
{
// Test ModelState and do stuff
}
}
View:
#model WebStaging.Models.ContactFormModel
#using Recaptcha
#using (Ajax.BeginForm("SubmitContactFormAction", "ContactForm", null, new AjaxOptions { HttpMethod = "POST" }, new { #id = "frmContactForm" }))
{
#Html.ValidationSummary(true)
<div>
Fields marked with * are required<br/><br />
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Name) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Name, new { #class = "input-242" })<br />
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Email) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Email, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Phone)
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Phone, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Subject) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Subject, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Message) *
</div>
<div class="input-column">
#Html.TextAreaFor(model => model.Message, new { #class = "input-textarea" })
</div>
</div>
<br />
<div id="captcha-panel" class="clear" style="text-align: right; float: right; padding-top: 5px;">
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
</div>
<p>
<div id="captcha-result" class="clear">
#Html.ValidationMessage("captcha-error")
</div>
<div class="clear pad-5" style="float: right; text-align: center;">
<button type="submit">Send</button><br />
<div id="submit-status" style="color: Green;"></div>
</div>
</div>

Answer 1

I think problem is caused because ReCaptcha is not a simple web control. I think you can easy walk around problem changing your "captcha-result" div with new class or style attribute.
<div id="captcha-result" class="someClassWithRedBigFont" >
#Html.ValidationMessage("captcha-error")
</div>
If you using jQuery you can check jQuery Validate plugin.