Question

每当显示任何错误消息时，glyphicon都会放大并出现故障。为什么？请参阅图片以供参考。

<form class="form-horizontal" enctype="multipart/form-data">
    <fieldset>
        <div class="form-group required">
            <label class="col-md-3 control-label" >Ad title <sup>*</sup></label>
            <div class="col-md-8">
                <input class="form-control input-md" type="text">
            </div>
        </div>
    </fieldset>
</form>

Answer 1

每当显示任何错误消息时，glyphicon都会放大并出现故障。为什么？

glyphicon不会放大。当您检查DOM时，您将看到Validate插件在input元素之后立即动态插入错误消息，从而扩大容器并破坏您的设计。

在label元素之后插入此input是默认结果。如果您使用浏览器的工具来检查实时DOM，您会发现如下所示：

<fieldset>
    <div class="form-group required">
        <label class="col-md-3 control-label" >Ad title <sup>*</sup></label>
        <div class="col-md-8">
            <input class="form-control input-md" type="text" name="foo">
            <label id="foo-error" class="error" for="foo">This field is required.</label>
        </div>
    </div>
</fieldset>

在设计布局时，您必须考虑到这种行为，因此不会破坏任何内容。

否则，您可以使用the errorPlacement callback根据需要编辑此行为。

errorPlacement: function(error, element) {
    error.insertAfter(element); // <- default
}

也许你想在父元素之后插入它？

errorPlacement: function(error, element) {
    error.insertAfter($(element).parent());
}

您还可以使用the errorElement option更改错误元素容器。

errorElement: "label" // <- default

查看所有选项：jqueryvalidation.org/validate

Answer 2

我遇到了同样的问题但我用这段代码解决了它，只需将其调整为您的JavaScript代码。

代码：

      $('#form').validate({
    rules: {
        fname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },

    errorElement: 'span',
    errorClass: 'help-block',


});

jQuery验证错误消息扩大了glyphicons

2 个答案: