Настройка сообщения об ошибке HTML просмотра таким образом?

Question

Я использую Twitter-Bootstrap и хочу сгенерировать правильный HTML-код для отображения ошибки, как это происходит на основном сайте, а именно:

HTML-код для вышеуказанного поля:

<div class="control-group error">
 <label for="inputError" class="control-label">Input with error</label>
  <div class="controls">
   <input type="text" id="inputError">
  </div>
</div>

Примечание: я удалил Please correct the error, <span>, я просто хочу поле ввода и метку.

И если бы я использовал свою страницу регистрации в качестве примера, поле email, это было бы:

<div class="control-group">
 <label for="user_email" class="control-label">Email*</label>
  <div class="controls">
   <input type="email" value="" name="user[email]" id="user_email" class="span3">
  </div>
</div>

Что мне нужно сделать, чтобы он функционировал как первый?

Answer 1

Не переизобретай колесо.Используйте simple_form .Текущая версия гема позволяет вам делать следующее:

rails generate simple_form:install --bootstrap

С этим вы можете использовать помощники simple_form.Они будут генерировать правильные вещи для вас.

Answer 2

Я только что столкнулся с этой проблемой и исправил ее с помощью простой модификации Bootstrap CSS.

Мой обычный код поля:

<div class="control-group">
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %>
    <div class="controls">
        <%= f.text_field :fieldname, :class => 'input-large' %>
    </div>
</div>

Поскольку я использую f.label и f.text_field, метка и входные данные инкапсулированы в div с классом field_with_errors (как упоминает Николас), в результате чего получается HTML:

<div class="control-group">
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div>
    <div class="controls">
        <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div>
    </div>
</div>

Чтобы они выглядели так же, как стиль Bootstrap <div class="control-group error">, я добавил несколько дополнительных селекторов в bootstrap.css. Я нахожу все ссылки на .control-group.error ... и добавляю повторяющиеся строки с .control-group .field_with_errors .... В итоге я получаю такую ​​вещь:

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group .field_with_errors > label,
.control-group .field_with_errors .help-block,
.control-group .field_with_errors .help-inline {
  color: #b94a48;
}

Возможно, это не самый элегантный способ сделать это для Rails, но мне он показался намного проще, чем более зависимые гемы или переопределение обработки ошибок. Да, вам придется вносить одни и те же изменения каждый раз, когда вы обновляете Bootstrap, но это довольно простые изменения, и вы, вероятно, могли бы сделать файл патча, чтобы сделать это автоматически.

Answer 3

Rails автоматически генерирует div с классом field_with_errors, когда появляется сообщение об ошибке.Это div оборачивает элемент с ошибкой.Чтобы настроить его, вы можете добавить эту строку в application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe }

Это значение по умолчанию, поэтому, чтобы получить ту же структуру, что и Twitter Bootstrap, вы можете играть с ней.*

html_tag - это заполнитель для поля с ошибками, например, <input name="model[attribute]" size="30" type="text" value="">

Вы можете заключить это в другой div, а также добавить диапазон, говорящий «Пожалуйста, исправьте ошибку».

Дополнительная информация: http://guides.rubyonrails.org/configuring.html - позиция 3,9