Question

提交表单时出现错误：我希望在引导程序错误/警报样式中突出显示有问题的字段。开箱即用：Bootstrap没有设置应用于rails表单中失败验证字段的传统fields_with_errors类的样式。

在过去per this question我简单地添加了这个：

.field_with_errors {
  @extend .has-error;
}

根据需要，使用引导程序错误/警报样式突出显示违规表单字段。但是，这在我目前的rails项目中不起作用，我不确定我缺少什么。

我确定我错过了一些简单的事情：

#application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-datepicker3";


.field_with_errors {
  @extend .has-error;
}

#relevant gems in Gemfile

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3', '>=3.3.6'
gem 'bootstrap-datepicker-rails', '~> 1.6', '>= 1.6.1.1'

提交前相关表单字段的HTML（两个字段都无法通过验证）：

<div class="form-group">
  <label for="expense_duration_start_date">Start Date</label><br>
  <input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" />
</div>

<div class="form-group">
  <label for="expense_duration_end_date">End Date</label><br>
  <input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" />
</div>

表单提交后的表单字段的HTML：

<div class="form-group">
  <div class="field_with_errors"><label for="expense_duration_start_date">Start Date</label></div><br>
  <div class="field_with_errors"><input data-provide="datepicker" type="text" name="expense_duration[start_date]" id="expense_duration_start_date" /></div>
</div>

<div class="form-group">
  <div class="field_with_errors"><label for="expense_duration_end_date">End Date</label></div><br>
  <div class="field_with_errors"><input data-provide="datepicker" type="text" name="expense_duration[end_date]" id="expense_duration_end_date" /></div>
</div>

所以.field_with_errors类正在应用，但它没有被设置样式，我不知道为什么@extend .has-error;的css不起作用。我该如何解决这个问题？

Answer 1

下面的解决方案。最重要的是确保包括所有相关课程。具体来说：form-group类，control-label类和form-control类：

<div class="row">
  <div class="form-group col-sm-2">
    <%= f.label :start_date, "Start Date", class: "control-label" %><br>
    <%= f.text_field :start_date, data: {provide: 'datepicker'}, class: "form-control" %>
  </div>
</div>

<div class="row">
  <div class="form-group col-sm-2">
     <%= f.label :end_date, "End Date", class: "control-label" %><br>
    <%= f.text_field :end_date, data: {provide: 'datepicker'}, class: "form-control" %>
  </div>
</div>

.fields_with_errors的引导样式不起作用

1 个答案: