title: Form validation messages not showing
body: <p>I am developing a registration form for a project I am working on. The project uses Bootstrap and jQuery to control form validation and I am using the validate plugin. This is setup in an ASP.NET MVC 4 Web application using C#. I have all my bundles and routing properly configured, but am having no luck with getting messages to display on the form.</p>
  
  <p>Here is the form:</p>
  
  <pre class="lang-html prettyprint-override"><code>@{
      ViewBag.Title = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  &lt;h2&gt;Registration Form&lt;/h2&gt;
  &lt;form id="formRegister" class="form-horizontal col-xs-3"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="textFirstName" class="control-label col-xs-4"&gt;First name&lt;/label&gt;
          &lt;div class="col-xs-8"&gt;
              &lt;input type="text" name="textFirstName" class="form-control" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="textLastName" class="control-label col-xs-4"&gt;Last name&lt;/label&gt;
          &lt;div class="col-xs-8"&gt;
              &lt;input type="text" name="textLastName" class="form-control" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="textEmail" class="control-label col-xs-4"&gt;Email&lt;/label&gt;
          &lt;div class="col-xs-8"&gt;
              &lt;input type="text" name="textEmail" class="form-control" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="textEmail2" class="control-label col-xs-4"&gt;Reenter email&lt;/label&gt;
          &lt;div class="col-xs-8"&gt;
              &lt;input type="text" name="textEmail2" class="form-control" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="passwordPW1" class="control-label col-xs-4"&gt;Password&lt;/label&gt;
          &lt;div class="col-xs-8"&gt;
              &lt;input type="password" name="passwordPW1" class="form-control" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="passwordPW2" class="control-label col-xs-4"&gt;Reenter Password&lt;/label&gt;
          &lt;div class="col-xs-8"&gt;
              &lt;input type="password" name="passwordPW2" class="form-control" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="btn-group col-xs-offset-4 col-xs-10"&gt;
              &lt;button type="reset" class="btn btn-info"&gt;Clear&lt;/button&gt;
              &lt;button type="submit" class="btn btn-info"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the JavaScript:</p>
  
  <pre><code>    $(document).ready(function () {
      $('#formRegister').validate({
          rules: {
              textFirstName: {
                  required: true,
                  minlength: 1,
                  maxlength: 50
              },
              textLastName: {
                  required: false,
                  maxlength: 50
              },
              textEmail: {
                  required: true,
                  email: true
              },
              textEmail2: {
                  required: true,
                  email: true,
                  equalTo: '#textEmail'
              },
              passwordPW1: {
                  required: true,
                  minlength: 4
              },
              passwordPW2: {
                  required: true,
                  equalTo: '#passwordPW1'
              }
          },
          messages: {
              textFirstName: "The first name must be from 1 to 50 characters in length",
              textLastName: "The last name must be from 0 to 50 characters in length",
              textEmail: "Please enter a valid email address",
              textEmail2: "Emails do not match",
              passwordPW1: "The password must be from 4 to 50 characters in length",
              passwordPW2: "Passwords do not match"
          },
          highlight: function(element){
              $(element).closest('.form-control').removeClass('success').addClass('error');
          },
          success: function(element){
              element.text('OK!').addClass('valid')
              .closest('.form-control').removeClass('error').addClass('success');
          },
          submitHandler: function (form) {
              form.submit();
          }
      });
  });
  </code></pre>