如何在 asp.net 核心 mvc 中停止对表单加载事件的 jquery 验证？

Question

Login.cshtml

@model UserModel
<script> src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.min.js">  
</script>   
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js">  
</script>  
<form id="form-submit" asp-controller="User" asp-action="Update" method="post" 
class="form-horizontal">
 <div class="form-group padding-left">
        <label asp-for="Password">Password</label>
        <input type="password" asp-for="Password" class="form-control" />
        <span asp-validation-for="Password" class="text-danger"></span>
    </div>
</form>


public class UserModel
{
    [Required]        
    [DataType(DataType.Password)]
    public string Password { get; set; }
 }

  //controller action
  public async Task<IActionResult> Update([FromQuery] UserModel)
   {
     return View("Login", UserModel);
   }

With above markup code & jquery validation script, form field validation happens even before user interaction with input fields ie, when form loading up on the browser, it is loading up the fields along with validation related error messages.

But my expectation is form field validation should happen ONLY when user interacts with the controls and provided some invalid inputs. What Im missing? How to achieve it?

Answer 1

You can change the view code, Validation is only triggered when the user clicks the submit button

@model UserModel
<form id="form-submit" asp-controller="User" asp-action="Update" method="post" 
class="form-horizontal">
 <div class="form-group padding-left">
        <label asp-for="Password">Password</label>
        <input type="password" asp-for="Password" class="form-control" />     
         <span asp-validation-for="Password" class="text-danger"></span>
    </div>
    <button type="submit">submit</button>
</form>

@section Scripts
{
   <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
   <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
}