title: Vue.js Asp.NET core Form validation
body: <p>I am currently learning vuejs with asp .net core right now.
  I am doing some form validation and adding some error messages.</p>
  
  <p>The error messages are from the Server side here is my sample code:</p>
  
  <pre><code> [HttpPost]
      public async Task&lt;IActionResult&gt; AddUser([FromBody] UserModel user)
      {
  
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState);
          }
  
          if (_context.Users.Any(u =&gt; u.UserName == user.UserName))
          {
              ModelState.AddModelError("UserName", "Username is already in used");
              return BadRequest(ModelState);
          }
  
          try
          {
              var userDto = new User
              {
                  FirstName = user.FirstName,
                  LastName = user.LastName,
                  Password = user.Password,
                  UserName = user.UserName
              };
              _context.Users.Add(userDto);
              await _context.SaveChangesAsync();
          }
          catch(Exception e)
          {
              ModelState.AddModelError("Saving Error", string.Format("Error in saving user. \nDetails:\n {0}", e.Message));
              return BadRequest(ModelState);
          }
  
          return Ok();
      }
  </code></pre>
  
  <p>And in the view:</p>
  
  <pre><code>&lt;form v-on:submit.prevent="SaveUser()"&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="userName"&gt;User Name&lt;/label&gt;
              &lt;input class="form-control" type="text" id="userName" placeholder="Username" v-model="userName" required :disabled="isEditMode" /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="userName"&gt;First Name&lt;/label&gt;
              &lt;input class="form-control" type="text" id="firstName" placeholder="First Name" v-model="firstName" required /&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="userName"&gt;Last Name&lt;/label&gt;
              &lt;input class="form-control" type="text" id="lastName" placeholder="Lastname" v-model="lastName" required /&gt;
          &lt;/div&gt;
          &lt;div v-if="!isEditMode"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="userName"&gt;Password&lt;/label&gt;
                  &lt;input class="form-control" type="password" id="password" placeholder="Password" v-model="password" required /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--TODO: Distribute to each control--&gt;
          &lt;div v-if="hasError"&gt;
              &lt;ul v-for="error in errors"&gt;
                  &lt;li style="color: red;" v-for="detail in error"&gt;{{detail}}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;
          &lt;button type="button" @click="backToList()" class="btn btn-danger"&gt;Cancel&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Basically I am doing the validations from the server-side.
  Currently the error messages are displayed below the controls
  And I need to distribute all the error message inline with the inputs.
  Can you help me with this?</p>
  
  <p>Thanks in advance.</p>