Javascript 字形图标未放置在文本框内&；glyphicon日历尺寸问题

我正在使用jQuery验证插件验证两个表单字段，名为“开始日期”&金钱。这两个字段都有一个简单的验证方法，其中required设置为true。我能够成功地验证该字段。然而，我收到了一个奇怪的问题。当字段被验证为有效或无效时，glyphicon ok图标和glyphicon remove图标出现在屏幕侧面，而不是文本框中此外，仅当开始日期字段被评估为无效且显示错误消息时，glyphicon日历图标的高度将比文本框大。为什么会这样

编辑：我成功地解决了这样一个问题：“仅当开始日期字段被评估为无效且显示错误消息时，glyphicon日历图标的高度才会比文本框大。”我目前仍在试图解决为什么*glyphicon ok**图标和glyphicon remove图标出现在屏幕侧面而不是文本框中

演示：

钱
开始日期

$（文档）.ready（函数（）{
$.validator.setDefaults({
突出显示：函数（元素、errorClass、validClass）{
如果（element.type==“无线电”）{
this.findByName（element.name）.addClass（errorClass）.removeClass（validClass）；
}否则{
$（元素）。最近（'.form group'）。removeClass（'has-success'）。addClass（'has-error has feedback'）；
$（元素）。最近（'.form group'）。查找（'span.glyphicon ok'）。删除（）；
$（元素）。最近（'.form group'）。追加（''）；
}
},
取消高亮显示：函数（元素、errorClass、validClass）{
如果（element.type==“无线电”）{
this.findByName（element.name）.removeClass（errorClass）.addClass（validClass）；
}否则{
$（元素）。最近（'.form group'）。removeClass（'has-error有反馈'）。addClass（'has-success有反馈'）；
$（元素）。最近（'.form group'）。查找（'span.glyphicon remove'）。删除（）；
$（元素）。最近（'.form group'）。追加（''）；
}
}
});
$（“#数据表单”）。验证({
规则：{
开始日期输入：{
必填项：true
},
资金投入：{
必填项：false
}
},
submitHandler:函数（表单）{
警惕（“成功”）；
}
});
});

尺寸问题与Glyphicon完全无关。这是由插入错误消息的方式/位置引起的。请参阅：就正确放置glyph图标而言，我不知道如何将其放在输入元素的“内部”。但是您必须检查DOM并调整jQueryDOM遍历，以便将图标放在其他位置。

<form id="dataForm" method="post" action="#">
<div class="form-group col-md-12">
    <label class="control-label col-md-4" for="moneyInput">money</label>
    <div class="col-md-7">
        <input type="text" id="moneyInput" name="moneyInput" class="form-control font-bold"
               maxlength="100" placeholder="money" value="" />
    </div>
</div>
<div class="form-group col-md-12">
    <label class="control-label col-md-4" for="startDateInput">Start Date</label>
    <div class="col-md-7">
        <div class="input-group date" id="startDateInput" style="max-width: 280px" data-provide="datepicker">
            <input type="text" class="form-control" name="startDateInput">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
    </div>
</div>
<input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

 $(document).ready(function () {
    $.validator.setDefaults({
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error has-feedback');
                $(element).closest('.form-group').find('span.glyphicon-ok').remove();
                $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                $(element).closest('.form-group').find('span.glyphicon-remove').remove();
                $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
            }
        }
    });

    $('#dataForm').validate({
        rules: {
            startDateInput: {
                required: true
            },
            moneyInput: {
                required: false
            }
        },
        submitHandler: function (form) {
            alert('success');
        }
    });
});