Question

我正在使用表单验证脚本，如果我根据需要进行数据验证：true（如下所示）那么当用户提交表单时，验证脚本将阻止表单提交并突出显示无效表单红色字段（通过向父容器添加“has-error”）。

因此，在下面的代码中，“has-error”被添加到输入组div。

            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" name="cost" id="cost" data-validation='{"required": true}' data-fieldname="{% trans %} cost {% endtrans %}" />
            </div>
            <span class="help-block">{% trans %} overview {% endtrans %}</span>

问题：帮助块没有变成红色，因为它不是输入组容器的一部分。

如果我将帮助块移动到输入组中，布局就会被破坏。更改这一案例的验证脚本似乎有点过分了。

所以我的问题：是否有一个等效的CSS / HTML布局我可以用来获得相同的结果，但是通过在容器中设置帮助块，以便在出错时它也会变红

由于

Answer 1

我不确定它是否会起作用，但您可以将帮助块移动到输入组中并使用CSS进行定位：

.help-block {
    position: absolute;
    top: 100%;
    left: 0;

}
.group-relative {
    position: relative;
    margin-bottom: 30px;
}

此处示例：jsfiddle

需要更改HTML结构，以便它可以使用我正在使用的脚本

1 个答案: