ASP.NET MVC 2 RC client side validation not working

Question

I can't seem to get any client side validation working on a MVC 2 RC app.

My model has the following:

public class ExampleModel
{
    [Required(ErrorMessage="Test1 is required")]
    [DisplayName("Test1")]
    public string Test1 { get; set; }

    [Required(ErrorMessage="Test2 is required")]
    [DisplayName("Test2")]
    public string Test2 { get; set; }
}

My view has the following code:

<% Html.EnableClientValidation(); %>
<%= Html.ValidationSummary(true, "Test was unsuccessful.") %>    
<% using (Html.BeginForm()) { %>
<div>
    <div class="editor-label">Test1:</div>
    <div class="editor-field">
        <%= Html.TextBoxFor(m => m.Test1) %>
        <%= Html.ValidationMessageFor(m => m.Test1) %>
    </div>

    <div class="editor-label">Test2:</div>
    <div class="editor-field">
        <%= Html.TextBoxFor(m => m.Test2) %>
        <%= Html.ValidationMessageFor(m => m.Test2) %>
    </div>

    <p>
        <input type="submit" value="Test" />
    </p>
</div>

I leave both fields blank and click the Test button and it goes right to the controller's post handler with no client side validation happening. I am not sure what I am missing.

I have the following javascript also included in the view (not sure if I need it all):

<link href="../../Scripts/jquery-1.3.2.min.js" type="text/javascript" />
<link href="../../Scripts/jquery.validate.min.js" type="text/javascript" />    
<link href="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript" /> 

Any ideas what I am doing wrong. I feel like I am missing something simple and the documentation for MVC 2 is sparse.

Edit: I have added the link:

<link href="../../Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript" />

And I have included the file in my project which I had to download from on of the links in the answers. Still not working at all. Any other ideas?

Edit: I am using Visual Studio 2008 with MVC 2 RC (not beta) and I am looking for any downloadable or posted examples of client-side validation working with the RC release.

Solution 1

Ok I figured this out... and it is 100% my fault. Although, a couple of the posts included some information that I did need also.

The main problem, which I am suprised no one noticed, was my HTML to include the scripts... look up at my post and see if you can see the problem.

I was using a <link href=... tag instead of the proper <script src=... tag. Totally my fault as I had quickly cut and pasted the CSS link without thinking and just changed the type and file. Duh!!!

Anyways the correct links required are:

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

Everything works then. You definately do need to include the 'MicrosoftMvcJQueryValidation.js' file from the futures project so I am upvoted all the posts that mentioned that.

Out of the box though that file is NOT included. If your not worried about using JQuery then you can just use the following includes to use the Microsoft implementation which will work out of the box with the RC:

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>    

I hope I can save at least one person some grief... I still can't believe how I could have screwed up the include and not noticed it for sooooo long.

Thanks again for all your help.

Solution 2

When you update project from MVC 2 Beta, use: /src/MvcFutures/MicrosoftMvcJQueryValidation.js from MVC 2 RC Source Code Package (link). Older Beta version do not work correctly with jquery.validation in RC. Needed javascript files are:

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

Right version of MicrosoftMvcJQueryValidation.js contains this $(document).ready() function:

// need to wait for the document to signal that it is ready
$(document).ready(function() {
    var allFormOptions = window.mvcClientValidationMetadata;
    if (allFormOptions) {
        while (allFormOptions.length > 0) {
            var thisFormOptions = allFormOptions.pop();
            __MVC_EnableClientValidation(thisFormOptions);
        }
    }
});

at the end of file (in RC release).

Solution 3

You have to include MicrosoftMvcJQueryValidation.js file :

<link href="MicrosoftMvcJQueryValidation.js" type="text/javascript" />

Check this: Where is the right version of MicrosoftMvcJQueryValidation.js for MVC 2 beta 2?

Next just put Html.EnableClientValidation(); somewhere in the View page. It must be before the first form you want to client-side validate. I prefer Site.Master page.

Working on ASP.NET MVC 2 RC.

Solution 4

Are you sure you included the correct JS files? Because in Phill Haack's post it has MicrosoftMvcJQueryValidation.js attached instead of MicrosoftMvcValidation.js.

He also sets the ClientValidationFunction property in the view :

<% ViewContext.FormContext.ClientValidationFunction 
= "EnableClientValidation"; %>

Though that was not RC, but Beta.

Solution 5

The default (and only supported by Microsoft) validation system in the ASP.NET MVC 2 Release Candidate does not use jQuery Validate. Instead, it uses a new validation system that exists entirely in MicrosoftMvcValidation.js (though you do also need to include MicrosoftAjax.js).

If you want to use the jQuery Validate library, it is included as part of the ASP.NET MVC Futures project (available here), which is a separate download, and has its own adapter script file.

Also, regarding the Html.ValidationSummary() helper, I believe it needs to be included inside the form if you want it to have the new client-side functionality. It will still work if it's outside of the form, but it will only work server-side.

View more solutions