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

Question

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

由于某种原因，jQuery-Validation在输入下插入一个span元素，即使没有错误。这导致在输入下出现额外的空间，这是不希望的。

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

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

1. jquery.validate.min.js这是jquery-validation软件包
2. jquery.validate.setup.js这是我自己的jquery-validation包配置
3. jquery.validate.unobtrusive.js这是jquery.validate.unobtrusive包
4. 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 id="INPUT_NAME-error" class="help-block help-block-error-placeholder"></span>

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

Answer 1

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

你在这里把它设置为span ......

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

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

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

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