MVC.net jQuery Validation

Question

After trying to avoid JavaScript for years, Iv started using Query 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

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.

$().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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

That should work.

Answer 2

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

Answer 3

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

Answer 4

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 =)