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

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

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

rails generate simple_form:install --bootstrap

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

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 метка и вход инкапсулируются в DOV с 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>

Чтобы они выглядели та же внешний вид, как и начальная загрузка <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;
}

Это может быть не самый элегантный способ сделать это для рельсов, но для меня это казалось намного проще, чем более зависимые драгоценные камни, или переопределение обработки ошибок. Да, вам придется вносить одинаковые изменения каждый раз, когда вы обновляете начальную загрузку, но они довольно простые изменения, и вы, вероятно, можете сделать патч -файл, чтобы сделать это автоматически.

Answer 3

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

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

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

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

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

Больше информации: http://guides.rubyonrails.org/configuring.html - Пункт 3.9