Display the Result of RemoteAttribute in MVC 3.0

Question

I have a ViewModel setup to use RemoteValidation using the RemoteAttribute. It works fine.

EDIT

Updated it a bit to show some fixed code.

I want to point out that this is not my actual "Register" code. This is testing it so I can use it in other situations. I'm not having users register using flat names!

Here are the libraries I am referencing, and how I am referencing them.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.js"></script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>

Here is how I am wiring the RemoteAttribute.

public class UserRegistrationModel
{
    [Required]
    [RegularExpression(@"^(?:[a-zA-Z\p{L} \.'\-]{3,48})$", ErrorMessage = "This name contains invalid characters. Names must be between 3 and 48 characters, contain only standard unicode symbols, and may not contain any punctuation other than the ['] and [-] symbols.")]
    [Remote("ValidateUserName", "Membership", ErrorMessage = "{0} is invalid.")]
    public string Name
    {
        get;
        set;
    }
}

And then here is the actual controller behavior.

    public ActionResult ValidateUserName(string name)
    {
        // perform logic

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

        return Json(false, JsonRequestBehavior.AllowGet);
    }

I have inspected my HTML, and this functions as I want. But I don't understand what to do from there. How can I display that information to the user? It just stores it in the html

data-val-remote="* is invalid"

I have watched, and I notice that even when the RemoteAttribute returns false, the html changes from

value to value class="valid", but in my other model validations, this changes to `class="input-validation-error"'.

So does anyone have any clues on how to draw the remote message back? Or is there really nothing I can do?

Answer 1

The following works fine for me:

public class UserRegistrationViewModel
{
    [Required]
    [RegularExpression(@"^(?:[a-zA-Z\p{L} \.'\-]{3,48})$", ErrorMessage = "This name contains invalid characters. Names must be between 3 and 48 characters, contain only standard unicode symbols, and may not contain any punctuation other than the ['] and [-] symbols.")]
    [Remote("ValidateUniqueName", "Home")]
    public string Name { get; set; }
}

Controller:

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

    public ActionResult ValidateUniqueName(string Name)
    {
        if (NameIsValid(Name)) 
        {
            return Json(true, JsonRequestBehavior.AllowGet);
        }

        return Json(string.Format("{0} is invalid", Name), JsonRequestBehavior.AllowGet);
    }
}

View:

@model AppName.Models.UserRegistrationViewModel

<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.TextBoxFor(x => x.Name)
    @Html.ValidationMessageFor(x => x.Name)
    <input type="submit" value="OK" />
}

You may also find the following blog post useful.