Html.ClientValidation doesnt works on mvc

Question

I am trying to work out client side validation and have followed a couple of tutorials , it looks quite simple but i have no idea why its not working on my project, below is the code:

 <script type="text/javascript" src="/Scripts/jquery-1.4.1.min.js"></script>
 <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
 <script type="text/javascript" src="/Scripts/MicrosoftMvcJQueryValidation.js"></script>

    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary("Please Correct the errors and try again")%>

    <div class="editor-label">
            <%: Html.LabelFor(model => model.test,"Test") %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.test)%>
            <%: Html.ValidationMessageFor(model => model.test)%>
        </div>
        </td>
        </tr>

edited: master page

 <script type="text/javascript" src="<%= Url.Content("~/scripts/jquery-1.5.1.js") %>"></script>
    <script type="text/javascript" src="<%= Url.Content("~/scripts/jquery.validate.js") %>"></script>
    <script type="text/javascript" src="<%= Url.Content("~/scripts/jquery.validate.unobtrusive.js") %>"> </script>
    <script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Scripts/tiny_mce/jquery.tinymce.js"></script>
    <script src="/Scripts/ie6.js" type="text/javascript"></script>

Any ideas Why the client side validation doesnt works when I press tab for that field.

I also tried url.content for the scripts but that doest work .. — Mr A
– Mr A, Commented Jul 14, 2011 at 15:02
Have you used something like Fiddler to make sure that it actually is finding your script files? Also: boo! Use razor :) — Dismissile
– Dismissile, Commented Jul 14, 2011 at 15:05

Darin Dimitrov · Accepted Answer · 2011-07-14 15:10:58Z

2

In ASP.NET MVC 3, jquery and jquery.validate are the default frameworks for doing client side validation. So modify your code to look like this:

<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery-1.5.1.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery.validate.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/scripts/jquery.validate.unobtrusive.js") %>"></script>

<% using (Html.BeginForm()) { %>
    <%= Html.ValidationSummary("Please Correct the errors and try again") %>

    <div class="editor-label">
        <%= Html.LabelFor(model => model.test, "Test") %>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.test) %>
        <%= Html.ValidationMessageFor(model => model.test) %>
    </div>
<% } %>

Things to notice:

Using jQuery 1.5.1 which is the default one bundled with ASP.NET MVC 3 RTM and the Tools Update. Make sure you use a later version of jQuery as IIRC there was some incompatibility between the jquery.validate plugin and the jquery version.
Using jquery.validate.js
Using jquery.validate.unobtrusive.js which unobtrusively attaches the jQuery.validate plugin to HTML5 data-* attributes emitted by the Html helpers.
Using the Url.Content helper to reference static resources instead of hardcoding their locations.
No more need to call Html.EnableClientValidation()
No more need to include any javascript that starts with the prefix Microsoft*

One final note: make sure that in your web.config unobtrusive client script validation is enabled:

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

The best way to get the latest versions of those scripts is to install the ASP.NET MVC 3 Tools Update, create a new ASP.NET MVC 3 project using the default wizard in Visual Studio and fetch those 3 scripts.

edited Jul 14, 2011 at 15:10

answered Jul 14, 2011 at 15:05

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Mr A Over a year ago

where can i get jquery.validate.unobtrusive.js

Dismissile Over a year ago

It should come included in the default Internet project template. That is, when you create a new MVC 3 project, you will have a few options: Internet Application, Intranet Application (if you installed the MVC 3 Tools Update) and Empty I believe. If you choose Internet it should be included in your Scripts folder.

Mr A Over a year ago

its not included in the mvc3 bundle

Darin Dimitrov Over a year ago

@Mr A, install the ASP.NET MVC 3 Tools Update and create a new ASP.NET MVC 3 application. You will get all you need there.

Mr A Over a year ago

@thnx Darin for always being there for mvc questions, it would have been a nightmare for me , if you would have not been helping me with these silly queries on mvc

|

Collectives™ on Stack Overflow

Html.ClientValidation doesnt works on mvc

1 Answer 1

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related