MVC Remote validation (unique email address)

Question

I'm currently working on a registration page where the users enter their email address. I want every email to be unique.

This is a part of my RegisterModel:

    [Required()]
    [System.Web.Mvc.Remote("IsUserEmailAvailable", "Account")]
    [EmailAddress()]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email")]
    public string Email { get; set; }

..

This is a part of my accountcontroller:

    public JsonResult IsUserEmailAvailable(string UserEmail)
    {
        return Json(!db.UserProfiles.Any(User => User.UserName == UserEmail),       JsonRequestBehavior.AllowGet);
    }

This my my view:

<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>


<hgroup class="title">
    <h1>Create Account</h1>
</hgroup>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
            <li>
                @Html.LabelFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmEmail)
                @Html.TextBoxFor(m => m.ConfirmEmail)
            </li>
        </ol>
        <input type="submit" value="Registrera" />
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

If I remove the [System.Web.Mvc.Remote("IsUserEmailAvailable", "Account")] everything is fine except the emailaddress wont be unique. With it, when I press the Submit, nothing happens.

Have I missed anything?

Answer 1

@Daniel J.G. is correct. Adding [AllowAnonymous] to the function makes it accessible.

Answer 2

The [Remote] attribute is quite limited and requires the name of the property to be the same as the name of the parameter in the controller action.

• Your property is named Email as in public string Email { get; set; }

• Your action has a parameter named UserEmail as in IsUserEmailAvailable(string UserEmail)

This won't work, because the remote validation will end up sending a request to validate the field like:

Account/IsUserEmailAvailable?Email=foo

Where Email is the name of the property. Actually, it is the name attribute of the rendered html input field. This might be a problem with nested models, where the name will be something like NestedModel.Email, but luckily it is not your case. (See for example this question)

So your validation method is receiving UserEmail as null (because the request contains a single parameter named Email), which might be causing the request to fail. (Have you checked the console in your browser to see if the ajax request failed?)

As both names should match, you could update your controller action so the parameter is named Email:

public JsonResult IsUserEmailAvailable(string Email)
{
    ...
}

Hope it helps!

Answer 3

You could setup a MVC controller action and use jquery to query it on-the-fly. Here is an article that explains ways to do it (Be advised it is for an auto-complete textbox but the theory is the same): How Do I Create an Auto-Complete TextBox?

I would be very interested in seeing the solution you come up with to accomplish this task.