Bootstrap3升级Bootstrap5后@Html.ValidationMessageFor验证失效求助

问题描述 #

将项目从Bootstrap3升级到Bootstrap5后，点击“保存”按钮且未填写必填文本框时，原Bootstrap3中正常显示的验证消息不再出现。

现有代码 #

Head部分 #

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Resources from https://jqueryui.com/datepicker/#dropdown-month-year
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">-->  
</head>

Body及脚本部分 #

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                @Html.LabelFor(model => model.Software, htmlAttributes: new { @class = "control-label col-md-4 required " })
                <div class="col-md-8">
                    @Html.EditorFor(model => model.Software, new { htmlAttributes = new { @class = "form-control", style = "max-width:100%" } })
                    @Html.ValidationMessageFor(model => model.Software, "", new { @class = "text-danger" })
                    <p id="errorSoftware" hidden=hidden class=text-danger></p>
                </div>
            </div>
        </div>
        <div class="col-md-6">

        </div>

    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script src="../../Scripts/myJavaScript.js"></script>  
}

已排除的原因 #

• _Layout.cshtml：同一布局下的其他页面（如“ADD BUILDING”）验证功能正常，排除布局引用问题。
• 自定义JavaScript：删除自定义JS函数及引用后问题仍存在，排除自定义脚本干扰。

解决步骤 #

1. 修正脚本加载顺序 #

当前脚本加载存在冲突：@Scripts.Render("~/bundles/jqueryval")通常已包含jQuery，重复加载jQuery会导致验证脚本初始化异常，调整顺序为：

@section Scripts {
    <!-- 先加载jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <!-- 再加载jqueryval -->
    @Scripts.Render("~/bundles/jqueryval")
    <!-- 然后加载jQuery UI -->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <!-- 最后加载自定义脚本 -->
    <script src="../../Scripts/myJavaScript.js"></script>  
}

2. 适配Bootstrap5表单验证规则 #

Bootstrap5对验证样式和触发逻辑有调整，需做以下配置：

• 给表单标签添加novalidate属性，禁用浏览器默认验证：

  <form asp-action="YourSaveAction" novalidate>
      <!-- 表单内容 -->
  </form>
  

• 添加jQuery验证适配Bootstrap5样式的脚本：

  $.validator.setDefaults({
      highlight: function (element) {
          $(element).addClass('is-invalid').removeClass('is-valid');
      },
      unhighlight: function (element) {
          $(element).addClass('is-valid').removeClass('is-invalid');
      },
      errorElement: 'div',
      errorClass: 'invalid-feedback',
      errorPlacement: function (error, element) {
          if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
          } else {
              error.insertAfter(element);
          }
      }
  });
  

  这段代码会将验证错误提示适配为Bootstrap5的invalid-feedback样式，同时给输入框添加错误状态标记类。

3. 确保加载Bootstrap5官方JS #

Bootstrap5的表单验证依赖官方脚本支持，需在jQuery之后加载：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

4. 确认模型验证属性 #

检查Software模型属性是否标记了必填验证：

[Required(ErrorMessage = "请填写软件名称")]
public string Software { get; set; }

验证测试 #

调整完成后，点击保存按钮，未填写必填项时，输入框会显示Bootstrap5风格的错误状态，下方同步显示验证消息。

内容的提问来源于stack exchange，提问作者Acadia