jQuery验证错误信息定位很奇怪

Question

我目前正在使用jQuery验证插件来验证我的表单字段。当用户未在该字段上输入任何值时，将显示错误标签，指出“此字段是必需的”。但是，错误标签一直显示在浏览器的左侧，看起来很奇怪。以下是我的问题，所需结果和代码

的屏幕截图

Error screenshot

Desired outcome

<script>
    $.validator.setDefaults({

        errorClass: 'help-block',

        highlight: function (element) {
            $(element)
                .closest('.form-group')
                .addClass('has-error');
        },
        unhighlight: function (element) {
            $(element)
                .closest('.form-group')
                .removeClass('has-error')
                .addClass('has-success');
        }
    });

    $('#dataForm').validate({
        rules: {
            accountNameInput: {
                required: true
            }
        }
    });
</script>

<form id="dataForm" role="form" class="form-horizontal">
    <div class="form-group col-md-12">
        <label class="control-label col-md-4" for="accountNameInput">Account name</label>
        <input type="text" id="accountNameInput" name="accountNameInput" class="form-control font-bold"
               maxlength="100" placeholder="Account name" value="" />
    </div>
</form>