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.