引导表单验证不适用于日期的数字字段集答案

【问题标题】：Bootstrap form validation not not working on set of number fields for date引导表单验证不适用于日期的数字字段集
【发布时间】：2016-03-25 10:26:03
【问题描述】：

我有这三个日期字段：

<div class="col-xs-12 form-group col-sm-6">
  <div class="row">
    <div class="col-xs-3">
      <input autocomplete="off" class="form-control birth-day" id="dan_rodjenja" name="dan_rodjenja" max="31" min="1" placeholder="DD" required type="number" value="" />
    </div>
    <div class="col-xs-3">
      <input autocomplete="off" class="form-control birth-month" id="mjesec_rodjenja" max="12" min="1" name="mjesec_rodjenja" placeholder="MM" required type="number" value="" />
    </div>
    <div class="col-xs-6">
      <input autocomplete="off" class="form-control birth-year" id="godina_rodjenja" max="2000" min="1910" name="godina_rodjenja" placeholder="GGGG" required type="number" value="" />
    </div>
 </div>

例如，如果第一个和第二个字段已填充，而第三个字段为空，则不会出现错误（没有红色边框）。或者当我将第一个字段留空时，所有三个都显示错误。有人可以帮我解决这个问题吗？

我正在使用引导验证http://1000hz.github.io/bootstrap-validator/。

【问题讨论】：

当其中一个字段为空时，您希望仅在空白字段上使用红色边框，还是希望在所有字段上使用红色边框？
我只希望在未通过验证的字段上使用红色边框（即留空或数字超出范围）。

标签： twitter-bootstrap validation bootstrapvalidator

【解决方案1】：

div 元素，即 输入元素的直接父级，类 .form-control 必须有类 .form-group（如下结构）。

<div class="form-group">
    <input class="form-control" ... />
</div>

所以你的代码看起来像这样：

<div class="col-xs-12 col-sm-6">
    <div class="row">
        <div class="form-group col-xs-3">
            <input autocomplete="off" class="form-control birth-day" id="dan_rodjenja" name="dan_rodjenja" max="31" min="1" placeholder="DD" required type="number" value="" />
        </div>

        <div class="form-group col-xs-3">
             <input autocomplete="off" class="form-control birth-month" id="mjesec_rodjenja" max="12" min="1" name="mjesec_rodjenja" placeholder="MM" required type="number" value="" />
        </div>

        <div class="form-group col-xs-6">
            <input autocomplete="off" class="form-control birth-year" id="godina_rodjenja" max="2000" min="1910" name="godina_rodjenja" placeholder="GGGG" required type="number" value="" />
        </div>
    </div> 
</div>

【讨论】：