Client Side Validation with Data Annotations in ASP.Net MVC3

Question

I'm using ASP.Net MVC3 with VB.

I have been able to get the server-side validation with data annotations working. Below is my relevant code:

In my view model:

   <Required(ErrorMessage:="Last Name is Required.")>
        Public Property SearchLName() As String

        <Required(ErrorMessage:="First Name is Required.")>
        Public Property SearchFName() As String

        <Required(ErrorMessage:="Zip Code is Required.")>
        <RegularExpression("^[0-9]{5}", ErrorMessage:="Zip Code must be 5 digits long and contain only numbers.")>

In my form on the view:

  <div><%= Html.LabelFor(Function(model) model.SearchFName)%>
       <%= Html.TextBoxFor(Function(model) model.SearchFName)%></div>
    <p><%= Html.ValidationMessageFor(Function(model) model.SearchFName)%></p>

 <div><%= Html.LabelFor(Function(model) model.SearchLName)%>
      <%= Html.TextBoxFor(Function(model) model.SearchLName)%></div>
   <p><%= Html.ValidationMessageFor(Function(model) model.SearchLName)%></p>

  <div><%= Html.LabelFor(Function(model) model.SearchZip)%>
       <%= Html.TextBoxFor(Function(model) model.SearchZip)%></div>
    <p><%= Html.ValidationMessageFor(Function(model) model.SearchZip)%></p>

Server-side validation works perfectly. However, I am not sure how to get the client-side working. I imported the following JQuery scripts, but it doesn't seem to make a difference.

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>

Could someone tell me what step I am missing? Thanks.

EDIT:

As a follow-up, the following information may be helpful. My web config has the following settings:

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

My master page has the following in the Head and I have verified that my jquery file is of the same version as the reference.

<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>

I CAN get client-side validation working - by putting in specific html elements that reference the exact error type that may occur (see this as mentioned by on of the answers: http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5). However, this has two problems: 1) It never does server-side validation, so this would be a problem if someone has javascript disabled and 2) My view has to be aware of the type of errors that might occur, so for every data annotation I add to the model, I have to add another error type to the view.

I found this article which was helpful, talking about how to set up to enable both client and server-side validation: http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx

However, it doesn't work for me, and my thought was that perhaps it is because it focused on MVC2. I was able to get server-side function, but not client-side.

EDIT: At this point, I'm putting off worrying about client-side validation, since server-side is more important. I'll see what I can do about setting up client-side after the rest of the application is working. If I ever figure out what I did wrong I'll update this post.

Answer 1

Do you also have

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

in your web.config?

Above the scripts you have referenced, you'll also need to reference jQuery

// put in the reference to whatever version of jQuery you're using 
<script src="<%: Url.Content("~/Scripts/jquery-1.6.2.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>

Also, take a look at MSDN Exercise 4: Using Unobtrusive jQuery at Client Side.

Answer 2

You gotta be doing something wrong. Here are the steps that work perfectly fine for me.

1. Create a new ASP.NET MVC 3 project using the Internet Template

2. Define a model:

   Imports System.ComponentModel.DataAnnotations
   
   Public Class MyViewModel
       <Required(ErrorMessage:="Last Name is Required.")>
       Public Property SearchLName() As String
   
       <Required(ErrorMessage:="First Name is Required.")>
       Public Property SearchFName() As String
   
       <Required(ErrorMessage:="Zip Code is Required.")>
       <RegularExpression("^[0-9]{5}", ErrorMessage:="Zip Code must be 5 digits long  and contain only numbers.")>
       Public Property SearchZip() As String
   End Class
   

3. Modify HomeController like so:

   Public Class HomeController
       Inherits System.Web.Mvc.Controller
   
       Function Index() As ActionResult
           Return View(New MyViewModel)
       End Function
   
       <HttpPost()>
       Function Index(model As MyViewModel) As ActionResult
           Return View(model)
       End Function
   End Class
   

4. Modify Index.aspx view view like so:

   <%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.MyViewModel)" %>
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8" />
       <script src="<%= Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
       <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>
   </head>
   <body>
       <% Using Html.BeginForm() %>
           <div>
               <%= Html.LabelFor(Function(model) model.SearchFName)%>
               <%= Html.TextBoxFor(Function(model) model.SearchFName)%>
           </div>
           <p><%= Html.ValidationMessageFor(Function(model) model.SearchFName)%></p>
   
           <div>
               <%= Html.LabelFor(Function(model) model.SearchLName)%>
               <%= Html.TextBoxFor(Function(model) model.SearchLName)%>
           </div>
           <p><%= Html.ValidationMessageFor(Function(model) model.SearchLName)%></p>
   
           <div>
               <%= Html.LabelFor(Function(model) model.SearchZip)%>
               <%= Html.TextBoxFor(Function(model) model.SearchZip)%>
           </div>
           <p><%= Html.ValidationMessageFor(Function(model) model.SearchZip)%></p>
   
           <input type="submit" value="OK" />
       <% End Using %>
   </body>
   </html>