HTML在Bootstrap from字段中需要验证消息样式问题

Question

在我的Bootstrap表单字段中，带有日历图标并且是必需的。然而，当错误按摩显示它会像下面的图像一样混乱。

HTML代码

<div class="input-group">
     <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
     <input type="text" value="" class="form-control error" name="from" id="from" required">
 </div>

下面的Bootstrap CSS

 .input-group-addon, .input-group-btn, .input-group .form-control {
        display: table-cell;
    }
.input-group-addon, .input-group-btn {
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}
.input-group-addon {
    background-color: #eeeeee;
    border: 1px solid #cacaca;
    border-radius: 3px;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
}
.input-group .form-control {
    float: left;
    margin-bottom: 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

HTML5必填错误

<label id="from-error" class="error" for="from">This field is required.</label>

因此，当发生错误时，HTML代码如下所示

<div class="input-group">
     <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
     <input type="text" value="" class="form-control error" name="from" id="from" required">
<label id="from-error" class="error" for="from">This field is required.</label>
 </div>

那么如何修复此问题并在字段中设置日历图标？

Answer 1

由于input-group中的所有元素均为display: table-cell，因此您必须向display: table-row提供label，以使其显示在新行中（位于不同的行中）一张桌子。）

编辑

如果您希望错误显示在输入正下方并在日历图标后面开始，我建议您改为使用position: absolute。

检查已修改的代码段：

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}

.input-group-addon,
.input-group-btn {
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
}

.input-group-addon {
  background-color: #eeeeee;
  border: 1px solid #cacaca;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 12px;
  text-align: center;
}

.input-group .form-control {
  float: left;
  margin-bottom: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}

/* #from-error {
  display: table-row;
} */

#from-error {
    position: absolute;
    bottom: -32px;
    left: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
  <input type="text" value="" class="form-control error" name="from" id="from" required>
  <label id="from-error" class="error" for="from">This field is required.</label>
</div>

Answer 2

试试这可行吗

 <div class="input-group">
 <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
 <input type="text" value="" class="form-control error" name="from" id="from" required">
 </div>
  <label id="from-error" class="error" for="from">This field is required.</label>