MVC.net jQuery Validation

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


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.

Tags:

Asp.Net Mvc

Jquery

Validation

Recent Posts