jquery - 使用有效图像验证表单

Question

我设计了一个 from 并尝试使用 Bootstrap 表单验证器对其进行验证。这里的验证工作正常，但如果文件经过验证，则有效图标(右标记)必须出现在文本框旁边，但对我来说它会出现在下一行。这是图片，

这是我的标记，

<div class="form-group control-group">
<label for="uln" class="control-label col-xs-4">Teacher Id:</label>
    <div class="col-xs-8">
        <div class="col-lg-8 controls">
          <input type="text" class="form-control" name="teacherId" id="teacherId" placeholder="Enter Teacher Id">
        </div>
</div>

</div>

我有CSS，

label.valid {
width: 24px;
height: 24px;
background: url(assets/img/valid.png) center center no-repeat;
display: inline-block;

text-indent: -9999px;
}

请帮助我，我想要正确的标记就在文本框旁边。

Answer 1

为什么不在 input 之后添加一个 span？

DEMO

HTML:

<div class="form-group control-group">
    <label for="uln" class="control-label col-xs-4  ">Teacher Id:</label>
    <div class="col-xs-8">
        <div class="col-lg-8 controls">
            <input type="text" class="form-control" name="teacherId" id="teacherId" placeholder="Enter Teacher Id">
            <span class="valid"></span>
        </div>
    </div>
</div>

CSS:

.valid {
    width: 24px;
    height: 24px;
    background: url(http://images.videolan.org/images/features/tick.png) center center no-repeat;
    display: inline-block;
    text-indent: -9999px;
}