Положение сообщения об ошибке проверки JQuery нечетное

Question

В настоящее время я использую плагин проверки jQuery для проверки поля формы.Когда пользователь не вводит какое-либо значение в поле, отображается сообщение об ошибке, в котором говорится, что «это поле обязательно для заполнения».Тем не менее, метка ошибки отображается полностью в левой части браузера, что кажется странным.Вот скриншот моей проблемы , желаемого результата и моих кодов

скриншот ошибки

Желаемый результат

<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>