c#asp.net-mvc validation asp.net-mvc-5 client-side-validation

MVC5 Client Side Validation not kicking in

So I have gone through tons of questions here on Stack Overflow and verified just about everything I can think of and I can't get client side validation to work. I have no idea what I am doing wrong.

To shorten the question, the original code was removed as a more simplified example is provided below.

EDIT:

I am editing this question to try and remove confusion and get to the root of the problem. So to make this very simple here is what I have done on my project:

Step 1: Created a new TestController

public class TestController : Controller
{
    [HttpGet, AllowAnonymous]
    public ActionResult Index()
    {
        return View(new TestViewModel());
    }

    [HttpPost, AllowAnonymous, ValidateAntiForgeryToken]
    public ActionResult Index(TestRequestModel requestModel)
    {
        if ([email protected])
        {
            return new TestViewModel
            {
                Email = requestModel.Email
            };
        }
        return View();
    }
}

Step 2: Created a new TestView

@model MyProject.Models.TestViewModel
@{
    ViewBag.Title =  "User Console Home";
}

@using (Html.BeginForm("Index", "Test", FormMethod.Post, new {@class = "form-horizontal", role = "form"}))
{
    @Html.ValidationMessageFor(m => m.Email)
    @Html.LabelFor(m => m.Email)
    @Html.TextBoxFor(m => m.Email)
}

Step 3: Created a new TestRequestModel

public class TestRequestModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

Step 4: Created a new TestViewModel

public class TestViewModel
{
    public string Email { get; set; }
}

Step 5: Ensured Web.Config contains proper keys

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Step 6: Ensured my _Layout.cshtml contains the right javascript files

<!DOCTYPE html>
<html>
<head>
    <script src="/JQuery/jquery-2.2.3.js"></script>
    <script src="/JQuery/jquery-ui-1.11.4.js"></script>
    <script src="/JQuery/jquery.validate.js"></script>
    <script src="/JQuery/jquery.validate.unobtrusive.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

Compared my project to a brand new one that has client validation working, and the code is almost identitcal

What am I missing? Out of the box I should not need to write an adapter to get Required or EmailAddress Attributes working. I feel like there is a setting or a piece of code that I am missing, I just can't figure out what.

Solution

The model which you used for the View is TestViewModel

@model MyProject.Models.TestViewModel

But you didn't decorated the Email property of TestViewModel with validation attributes, so change your view model to this:

public class TestViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

Note: Client-side validation will be used in rendered view which you created using TestViewModel. So to enable client-side validation, you need to decorate its properties with validation attributes. These validations don't have anything to do with TestRequestModel which you used as input of POST action. The attributes which you set on TestRequestModel will be hit after posting data to server when model binding.