即使没有要显示的错误，jQuery Validation 也会为错误放置 span 元素答案

【问题标题】：jQuery Validation is placing span element for the error even when there is no error to show即使没有要显示的错误，jQuery Validation 也会为错误放置 span 元素
【发布时间】：2026-01-23 23:00:01
【问题描述】：

我有一个在 ASP.NET MVC5 之上使用c# 编写的项目。我正在使用css-bootstrap 3 top 设计我的网站。我还使用jQuery-Validation 和jquery-validation-unobtrusive 来处理客户端验证。

由于某种原因，jQuery-Validation 在输入下方插入了一个span 元素，即使没有错误。这会导致输入下方出现多余的空间，这是不需要的。

如果没有错误，如何防止jQuery-Validation包插入错误容器？

这是我将这些包包含到我的 html 布局中的顺序

jquery.validate.min.js 这是 jquery-validation 包
jquery.validate.setup.js 这是我自己的 jquery-validation 包配置
jquery.validate.unobtrusive.js 这是 jquery.validate.unobtrusive 包
query.validate.unobtrusive.setup.js 这是我自己的 jquery.validate.unobtrusive 包配置

这是我的jquery.validate.setup.js文件的内容

$.validator.setDefaults({
    ignore: ":hidden:not('.force-validaion'), .ignore",
    highlight: function (element, _errorClass, _validClass) {

        $(element).closest('.form-group,.form-group-custom.input-group,.input-group-custom').addClass('has-error');
    },
    unhighlight: function (element, _errorClass, _validClass) {

        $(element).closest('.help-block-error-placeholder').removeClass('has-error');
    }
});

这是我的query.validate.unobtrusive.setup.js文件的内容

var settings = {
    errorElement: "span",
    errorClass: "help-block help-block-error-placeholder",
    debug: true,
    errorPlacement: function (error, element) {
        var elm = $(element);
        var parent = elm.closest('.input-group,.input-group-custom');

        if (parent.length) {
            error.insertAfter(parent);
        }
        else if (elm.prop('type') === 'checkbox' || elm.prop('type') === 'radio') {
            error.appendTo(elm.closest(':not(input, label, .checkbox, .radio)').first());
        }
        else {
            error.insertAfter(elm);
        }
    },

    submitHandler: function (form) {
        showLoading();
        form.submit();
    }
};

$.validator.unobtrusive.options = settings;

输入失去焦点后由于某种原因，即使没有错误也会添加以下span

<span id="INPUT_NAME-error" class="help-block help-block-error-placeholder"></span>

除非出现错误，否则如何防止插入此 span 元素？

【问题讨论】：

只有在输入字段失去焦点后才会发生这种情况吗？这发生在所有输入字段还是仅一个？它向您显示什么错误？您的控制台中是否显示任何错误？
@crazymatt 它被添加到所有输入中。一旦你点击输入然后点击离开它，跨度被插入，空值作为跨度的文本值。我在控制台中没有收到任何 JS 错误
@Html.ValidationMesssageFor() 生成一个<span> 元素作为占位符。当出现客户端验证错误时，另一个包含错误文本的 <span> 元素被插入到包含错误文本的 <span> 中（如果值有效，则内部 <span> 被删除。不清楚你想要实现什么使用您的自定义 js 函数

标签： javascript jquery asp.net-mvc-5 jquery-validate unobtrusive-validation

【解决方案1】：

jQuery Validate 插件将添加此span 以包含任何验证错误消息。然后它会在切换错误消息时切换这些元素。

您在此处将其设置为 span...

var settings = {
    errorElement: "span" 
    ....

默认情况下（如果您忽略 errorElement 选项），插件将创建 label 元素。

我不确定一个不可见的span 是如何占用您布局中的空间的，但它肯定与您的 CSS 有关，而我们看不到。

我的建议是尝试删除 errorElement 以恢复为默认的 label 元素。当没有错误消息时，此隐藏元素应在布局中占用零空间。否则，如果您出于某种原因必须使用span，那么您将不得不检查您的实时 DOM 以解决您的 CSS。

【讨论】：