CODEWITHSUNDEEP
c#asp.net-mvcvalidationasp.net-mvc-5client-side-validation
Bagzli
Bagzli

Reputation: 6569

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>
  1. 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.

Upvotes: 2

Views: 2118

Answers (2)

Anadi
Anadi

Reputation: 754

Your code is working for me in a new project. I have just changed the TestViewModel model.Other codes are same.The model you are sending to view by return view(model) and the model that you are using in your view i.e. @model MyProject.Models.TestViewModel should be same for the client validation to work.

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

Either you change the TestViewModel as I did or use TestRequestModel in you view and change your index method's return statement to return View(new TestRequestModel());

If it does not work drag your js files directly in your page and test either js(s) is/are loading or not.

Upvotes: 0

Reza Aghaei
Reza Aghaei

Reputation: 125197

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.

Upvotes: 4

Related Questions