MVC.net JQuery Validation

Question

After trying to avoid JavaScript for years, Iv started using JQuery for validation in MVC asp.net, as there does not seem to be an official way of doing validation, Iv been surprised how good JQuery is.

Firstly is there a way to get intellisense working for JQuery and its validation plugin, so that i don have to learn the api?

Secondly how do I create a validation summary for this, it currently appends the error to the right of the text box.:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
        rules: {            
            UserName: {
                required: true,
                minLength: 2,

            }
        },
        messages: {

            UserName: {
                required: "Please enter a username",
                minLength: "Your username must consist of at least 2 characters",

            }
        }
    });
});
</script>

<form id="CreateLog" action="Create" method="post" />   
        <label>UserName</label><br />
        <%=Html.TextBox("UserName")%> 
         <br />  
          <div class="error"> </div>
        <input  type=submit value=Save />
       </form>

I tried adding this to the script:

 errorLabelContainer: $("#CreateLog div.error")

and this to the html:

  <div class="error"> </div>

But this didn't work.

Answer 1

There is a Visual Studio 2008 hotfix for JQuery IntelliSense in VS2008 . This might have been bundled with SP1 as well.

Answer 2

Try specifying both a wrapper and a label container in your options. I also added display:none; to the style of error-container to let jquery decide when to show it.

Html:

<div class="error-container">
<ul>
</ul>
</div>
<form id="CreateLog" action="Create" method="post" />   
<label>UserName</label><br />
<%=Html.TextBox("UserName")%> 
<br />  
<input  type=submit value=Save />
</form>

Script:

<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
    errorLabelContainer: $("ul", $('div.error-container')),
    wrapper: 'li',
    rules: {            
        UserName: {
            required: true,
            minLength: 2,

        }
    },
    messages: {

        UserName: {
            required: "Please enter a username",
            minLength: "Your username must consist of at least 2 characters",

        }
    }
});
});
</script>

That should work.

Answer 3

regarding intellisense for jquery (and other plugins): in order to have full intellisense in your own script files as well, just include the following line at the top of your .js file once for each file you want intellisensee from:

/// <reference path="[insert path to script file here]" />

simple, but very useful =)

Answer 4

You might want to check out Karl Seguin's ASP.NET MVC validation approach on CodeBetter.com and his sample application canvas.

Validation - Part 1 - Getting Started

Validation - Part 2 - Client-Side

Validation - Part 3 - Server-Side