使用jquery验证和引导

Question

编辑：见下文 - 这显然是由某种浏览器错误造成的。

我已使用Bootstrap制作表单，并且我使用jqueryval验证其中的数据。验证本身都有效，但我有一个布局问题，我似乎无法深入了解。

以下是目前的情况：

如您所见，当您填写字段时，会创建状态消息标签并添加到每个文本框下方。然而，当你弄清楚它时，尽管被隐藏在视野之外，它仍然占据了空间，如第一个下面的额外间隙所示。

额外的空格似乎来自标签，在每个control-group的底部看到，jqueryval动态创建。但是：

当您将鼠标悬停在页面上时，该标签会被幻影显示，并且不会占据页面上的任何空间。

是什么让这个空间出现？

从开发工具中提取的运行时HTML如下所示 - 根据屏幕截图：

<form id="form-account-create" action="#" method="post" novalidate="novalidate">
                <div class="form-group">
                    <div class="control-group has-feedback has-success">
                        <label for="email" class="control-label">Valid Email Address:</label>
                        <small>You will need this to activate your account.</small>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-at"></i></span>
                            <input type="email" aria-describedby="emailStatus" name="email" id="email" class="form-control valid" aria-required="true" aria-invalid="false">
                        </div>
                        <span aria-hidden="true" class="form-control-feedback"><i class="fa fa-check"></i></span>
                        <span class="sr-only" data-error-role="message" id="emailStatus">(success)</span>
                    <label id="email-error" class="error" for="email"></label></div>
                </div>
                <div class="form-group">
                    <div class="control-group has-feedback has-error">
                        <label for="username" class="control-label">Username:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" aria-describedby="usernameStatus" name="username" id="username" class="form-control" aria-required="true" aria-invalid="true">
                        </div>
                        <span aria-hidden="true" class="form-control-feedback"><i class="fa fa-times"></i></span>
                        <span class="sr-only" data-error-role="message" id="usernameStatus">(success)</span>
                    <label id="username-error" class="error" for="username">Please enter at least 3 characters.</label></div>
                </div>
                <div class="form-group">
                    <div class="control-group has-feedback">
                        <label for="password" class="control-label">Password:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                            <input type="password" aria-describedby="passwordStatus" name="password" id="password" class="form-control">
                        </div>
                        <span aria-hidden="true" class="form-control-feedback"></span>
                        <span class="sr-only" data-error-role="message" id="passwordStatus">(success)</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="control-group has-feedback">
                        <label for="passconf" class="control-label">Confirm Password:</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                            <input type="password" aria-describedby="passconfStatus" name="passconf" id="passconf" class="form-control">
                        </div>
                        <span aria-hidden="true" class="form-control-feedback"></span>
                        <span class="sr-only" data-error-role="message" id="passconfStatus">(success)</span>
                    </div>
                </div>
            </form>

和jquery验证器：

$(document).ready(function () {
    var form = $('#form-account-create');
    form.validate({
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            },
            username: {
                required: true,
                minlength: 3
            },
            password: {
                required: true,
                password: true,
                minlength: 8
            },
            passconf: {
                required: true,
                equalTo: password
            }
        },
        messages: {
            password: {
                password: "Your password should contain at least one letter and one digit."
            }
        },
        errorPlacement: function (error, element) {
            var status = $(element).closest('.control-group');
            error.appendTo(status);
        },
        highlight: function (element) {
            element = $(element);
            var controlGroup = element.closest('.control-group');
            controlGroup.removeClass('has-success').addClass('has-error');
            controlGroup.find('.form-control-feedback').html('<i class="fa fa-times"></i>');
        },
        success: function (element) {
            element = $(element);
            var controlGroup = element.closest('.control-group');
            controlGroup.removeClass('has-error').addClass('has-success');
            controlGroup.find('.form-control-feedback').html('<i class="fa fa-check"></i>');
        }
    });

    $.validator.addMethod("password", function (value) {
        return /[a-zA-Z]/.test(value) && /\d/.test(value) // has a lowercase letter and a digit
    });
});

修改

这似乎是某种浏览器错误（Firefox 38.0.5）。如果我只是在检查器工具中的状态消息节点上添加BLANK样式属性，则间隙将关闭。我已经把它移到了它的父母身边而现在一切正常。