ASP.NET Core：jquery.validate.js 在与另一个 <script> 标记一起使用时不起作用答案

【问题标题】：ASP.NET Core: jquery.validate.js is not working when used with another <script> tagASP.NET Core：jquery.validate.js 在与另一个 <script> 标记一起使用时不起作用
【发布时间】：2018-12-09 20:08:25
【问题描述】：

使用VS2017，我使用默认ASP.NET Core Web Application 模板和Individual User Account 模式创建了一个ASP.NET MVC Core 1.1.1 应用程序。正如我们所知，VS2017 默认在项目中创建和配置所有必要的css 和javascripts 文件。当我使用 javascript 和 jquery.validate.js 时，validation 在客户端和服务器端都可以正常工作，如下所示：

观察

当我在输入框中输入正确的值（float 类型）时，表单提交成功并且该值被插入到 SQL 数据库中。但是如果我故意输入一个字符串，比如 abc，则不会发生客户端错误，但在 post 操作时，正如预期的那样，ModelStat.IsValid 返回 false，因此数据不会插入到数据库中。
在页面（或使用 F12）的源代码视图（如下所示）上，我可以看到 jquery.validate.js 已正确加载
我尝试在<script>...<\script> 之前加载jquery.validate.js，然后将其移动到<script>...<\script> 之后，但jquery.validate.js 加载成功，但客户端验证仍然不起作用。

查看

@model MyProj.Models.MainViewModel
 ...
<div class="form-group">
 <label asp-for="Price"></label>
 <div class="col-md-10">
    <input asp-for="Price" class="form-control"></input>
    <span asp-validation-for="Price" class="text-danger"></span>
 </div>
 </div>
 <div>
   <button type="submit" name="submit"...>GO</button>
 </div>

@section scripts
{  
   @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
   <script>
     $(document).ready(function () {
     ...
     ...
     });
   </script>
}

页面源视图

...
<div class="col-sm-2">
    <small class="input-group-addon">$</small>
    <input class="form-control text-right" type="text" data-val="true" data-val-number="The field Price must be a number." id="Price" name="Price" value="">
    <span class="text-danger field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>
...
</div>
...
       <script src="/lib/jquery/dist/jquery.js"></script>
       <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
       <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>


    <script src="/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>


  <script>
    $(document).ready(function () {
    ...
    ...
   });
 </script>

【问题讨论】：

@section 不应像在 html 中那样呈现
@JoeAudette 这是帖子Page Source View 部分的错字——我已经更正了。感谢您指出这一点。
您是否在页面上遇到任何脚本错误？您的视图模型上是否有用于验证的注释？您应该在问题中至少部分展示您的视图模型以及您的视图
您是说如果您省略最后一个脚本元素，它会按预期工作吗？如果是这样，可能需要更多地了解该脚本的作用，因为它似乎破坏了它
是的，代码看起来没问题，没有什么不对劲。局部视图是可以的，除非它是由 ajax 加载的，这可能会使其错过不引人注目的连接。在页面加载时，不显眼的脚本应该看到数据属性并连接验证，但如果在页面加载后由 ajax 加载，则可以解释问题。如果在初始页面加载期间呈现部分视图，它应该可以工作

标签： asp.net-core asp.net-core-mvc model-validation

【解决方案1】：

为时已晚，希望对你有所帮助

也可以这样使用unobtrusive：

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

【讨论】：