title: Client side validation doesn't work in ASP.NET Core MVC app
body: <p>I have a login page which has a following model:</p>
  
  <pre><code>public class LoginViewModel : BaseViewModel
  {
      public LoginFormViewModel Form { get; set; }
  }
  public class LoginFormViewModel
  {
      [Required]
      public string UserName { get; set; }
  
      [Required]
      [DataType(DataType.Password)]
      public string Password { get; set; }
  
      [Required]
      public bool RememberMe { get; set; }
  }
  </code></pre>
  
  <p>And this is the page html:</p>
  
  <pre><code>@model SocialNetwork.Web.ViewModels.LoginViewModel
  
  @section scripts {
      &lt;script src="~/lib/jquery-validation/dist/jquery.validate.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
  }
  
  &lt;h2&gt;Login&lt;/h2&gt;
  
  &lt;style&gt;
      #btn-login {
          float: left;
          margin-left: 14px;
      }
  
      #checkbox-remember-me {
          margin-right: 15px;
      }
  &lt;/style&gt;
  
  &lt;div class="col-md-offset-2 col-md-4"&gt;
      &lt;form asp-action="Login"&gt;
          &lt;div class="row"&gt;
              &lt;div&gt;
                  &lt;div class="form-group col-md-12"&gt;
                      &lt;label asp-for="Form.UserName"&gt;&lt;/label&gt;
                      &lt;input asp-for="Form.UserName" name="UserName" class="form-control"&gt;
                      &lt;span asp-validation-for="Form.UserName"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div&gt;
                  &lt;div class="form-group col-md-12"&gt;
                      &lt;label asp-for="Form.Password"&gt;&lt;/label&gt;
                      &lt;input asp-for="Form.Password" name="Password" class="form-control"&gt;
                      &lt;span asp-validation-for="Form.Password"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div asp-validation-summary="All"&gt;&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="checkbox pull-right" id="checkbox-remember-me"&gt;
                  &lt;label&gt;
                      &lt;input asp-for="Form.RememberMe" name="RememberMe"&gt;
                      Remember me
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;button type="submit" id="btn-login" class="btn btn btn-primary"&gt;
                  Log In
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And client side validation simply doesn't work, those <code>&lt;span asp-validation-for="some-property"&gt;&lt;/span&gt;</code> simply don't work; but <code>&lt;div asp-validation-summary="All"&gt;&lt;/div&gt;</code> does, when page refreshes, ofcourse.</p>
  
  <p>I haven't changed almost anything in my _Layout.cshtml. I am sure that those scripts at the top of Login.cshtml are in that folder, and that they are being included.</p>
  
  <p>The forms action in the controller takes LoginFormViewModel as it's parameter and it's all ok with it.</p>
  
  <p>I have overriden the name because, otherwise, form wasn't being bound to it's model on form submition. The name of Model.Form.Password was Form_Password, and it couldn't map that into the model on submition, because in model it was called just Password.
  So, I guess that must be a problem, so there must be a another way to map that form to its model on submission, right?</p>