验证消息未显示在TextBox下方

Question

我对ASP.NET MVC很新。我正在开展这个项目，我Product Name为TextBox。我正在尝试在此字段上执行Validation。点击Submit按钮后，我想查看该字段是否为空。如果没有，我想打印字段下面的错误消息。

目前，在运行代码时，验证似乎工作正常（因为我通过放置样本alert()来测试它。但是，我没有在字段下面得到任何文本。我要去哪里错？

.cshtml代码：

<div class="input-group fg-float">
    <div class="fg-line">
        <input asp-for="ProductName" class="form-control" id="productName" name="productName" required />
        <label asp-for="ProductName" class="fg-label" for="productName">Product Name</label>
        <span asp-validation-for="ProductName" class="text-danger"></span>
    </div>
</div>

jQuery代码：

@section Scripts{
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script type="text/javascript">
    $.validator.setDefaults({ ignore: ":hidden:not(select)" })
    $(document).ready(function () {

        $('form').validate({
            onfocusout: function (element) {
                this.element(element);
            },
            rules: {

            },
            messages: {
                productName: 'Enter Product Name'
            },
            highlight: function (element) {
                $(element).closest('.input-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.input-group').removeClass('has-error');
                $(element).closest('.input-group').addClass('has-success');
            }
        });
    })
</script>

}