ASP.NET MVC3 Remote Validation does not output error message

Question

I have a simple Model that is the default RegisterModel and upon creating a View based on that model for Create I end up having

public class RegisterModel
{
    [Required]
    [Remote("UserNameExists", "Account", "", ErrorMessage = "Username is already taken.")]
    [Display(Name = "Username (spaces will be stripped, must be at least 6 characters long)")]
    public string UserName { get; set; }

    [Required]
    [Editable(true)]
    [Display(Name = "First and Last name")]
    public string Name { get; set; }

    [Required]
    [DataType(DataType.EmailAddress, ErrorMessage = "You need to enter a valid email")]
    [Remote("EmailExists", "Account", "", ErrorMessage = "Email is already taken.")]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    //[Required]
    //[ValidatePasswordLength]
    [DataType(DataType.Password)]
    [Display(Name = "Create a password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Verify password")]
    //[Compare("Password", ErrorMessage = "Password's do not match.")]
    public string ConfirmPassword { get; set; }
}

and in the View:

<h3>
    Details</h3>
@using (Html.BeginForm("GenerateBetaLink", "Account", FormMethod.Post, new { @id = "beta-user" }))
{
    @Html.ValidationSummary(true)
    <div>
        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName) 
            @Html.ValidationMessageFor(model => model.UserName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name) 
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email) 
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <p>
            &nbsp;</p>
        <p>
            <input type="submit" value="Create Beta User" class="btn-submit" />
            <span class="loading"></span>
        </p>
    </div>
}

My Validation Controller

public class ValidationController : Controller
{
    public JsonResult UserNameExists(string UserName)
    {
        OnlineServicesRepository db = new OnlineServicesRepository();

        var user = db.FindUserByUsername(UserName.Trim());
        return user == null ?
            Json(true, JsonRequestBehavior.AllowGet) :
            Json(string.Format("{0} is not available.", UserName),
                JsonRequestBehavior.AllowGet);
    }

    public JsonResult EmailExists(string Email)
    {
        OnlineServicesRepository db = new OnlineServicesRepository();

        var user = db.FindUserByEmail(Email.Trim());
        return user != null ?
            Json(true, JsonRequestBehavior.AllowGet) :
            Json(string.Format("{0} is not available.", Email),
                JsonRequestBehavior.AllowGet);
    }
}

My problem is that Remote Validation does fire, but does not write anything into the Error Message as it should, plus, the jQuery method .valid() keeps telling me that the form is valid:

_{(source: balexandre.com)}

What am I missing here?

The MSDN article shows the same code (in the downloadable file)

Answer 1

I had the same problem and resolved it by updating to the latest jQuery (1.6) and jQuery.validate (1.8) libraries. The easiest way to get these is searching NuGet for jQuery.

Answer 2

The following worked fine for me:

Model:

public class RegisterModel
{
    [Required]
    [DataType(DataType.EmailAddress, ErrorMessage = "You need to enter a valid email")]
    [Remote("EmailExists", "Home", "")]
    [Display(Name = "Email address")]
    public string Email { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(RegisterModel model)
    {
        return View(model);
    }

    public ActionResult EmailExists(string email)
    {
        if ((email ?? string.Empty).Contains("foo"))
        {
            return Json(email + " is not available", JsonRequestBehavior.AllowGet);
        }

        return Json(true, JsonRequestBehavior.AllowGet);
    }
}

View:

@model RegisterModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.LabelFor(model => model.Email)
    @Html.EditorFor(model => model.Email) 
    @Html.ValidationMessageFor(model => model.Email)
    <input type="submit" value="OK" />
}