How can I return an MVC error message from user registration to my client browser

Question

I am using MVC5 for Identity management in an MVC5 application. The code is working but I have a problem when a user tries to register and does not use the same password and confirmation password. I am not using any front-end check for this so the registration data is sent to the server. On the server there is a model error and ModelState.IsValid returns false:

public class RegisterViewModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

Here's my controller method. When I check the value of ModelState I see there is an error:

    // POST: /Account/Register
    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public ActionResult Register(RegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
            // Create a local login before signing in the user
            var user = new User(model.UserName);
            var result = IdentityManager.Users.CreateLocalUser(user, model.Password);
            if (result.Success)
            {
                IdentityManager.Authentication.SignIn(AuthenticationManager, user.Id, isPersistent: false);
                return Redirect("~/home");
            }
            else
            {
                AddErrors(result);
            }
        }
        // If we got this far, something failed, redisplay form
        return View(model);
    }

My HTML:

    <form action="/Account/Register" class="form" method="post">
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <div id="input-fields">
                <div>
                    <input class="big medium-margin"
                           name="UserName"
                           pattern=".{5,}" title="5 characters minimum"
                           placeholder="Username"
                           required size="25" type="text" value="" />
                </div>
                <div>
                    <input name="Password"
                           pattern=".{5,}" title="5 characters minimum"
                           placeholder="Password"
                           required size="25" type="password" />
                </div>
                <div>
                    <input name="ConfirmPassword"
                           pattern=".{5,}" title="5 characters minimum"
                           placeholder="Confirm Password"
                           required size="25" type="password" />
                </div>
            </div>
            <button type="submit">Register</button>
            <button type="button" onclick="location.href='/Account/Login'">Login</button>
        </form>

The error is:

ModelState.Values[2].Errors[0].ErrorMessage = The password and confirmation password do not match.

How can I arrange for this message to be returned to my form so that the users can see it?

I assume it should display in:

<div class="validation-summary-errors"><ul><li style="display:none"></li>
</ul></div>

But how is this going to happen?

Answer 1

You are not using @Html.ValidationMessageFor(d=>d.YourProperty)

This require to tell the ValidationSummary to display errors by setting the parameter to false.

@Html.ValidationSummary(false). 

Here is the documentation from MSDN : http://msdn.microsoft.com/en-us/library/ee839469(v=vs.108).aspx

The boolean parameter indicate if you want to display the model error only or everything. You have set to true which mean that you want to display only error from the model which is not used (because of the absence of ValidationMessageFor).