Пользовательская настройка field_with_errors

17

Есть ли способ сказать Rails не создавать div.field_with_errors вокруг как метки, так и собственно поля, но создать div.error вокруг них обоих?

например. фрагмент из моего представления с формой (написанной в HAML)

= form_for @user do |f|
  %div.clearfix
    = f.label :name
    %div.input
      = f.text_field :name

В случае ошибки я хочу, чтобы корень div был div.clearfix.error и избежал этого field_with_errors . Могу ли я это сделать?

В качестве еще одного варианта я могу создать formtastic для создания Bootstrap -истовых элементов, без классов css и html formtastic, но с бутстрапом. Могу ли я сделать что-то с полями ошибки в случае использования formtastic?

    
задан Gosha Arinich 17.09.2011 в 14:20
источник

13 ответов

17
Ответ на

@ flowdelic кажется самым простым решением. Однако имена неверны. Это может быть связано с версией Rails / Bootstrap, но это работает для меня.

/* Rails scaffold style compatibility */
#error_explanation {
  @extend .alert;
  @extend .alert-error;
  @extend .alert-block; /* optional */
}

.field_with_errors {
  @extend .control-group.error
}
    
ответ дан iosctr 18.05.2012 в 13:14
источник
7

, если кто-то использует LESS:

в bootstrap_and_overrides.css.less вы можете добавить:

#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

, который представляет собой версию LESS показанного примера sass.

    
ответ дан thedanielhanke 20.11.2012 в 11:30
источник
5

Это то, что работает с Bootstrap 3 при использовании Ссылка .

.field_with_errors {
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
    
ответ дан asgeo1 12.09.2013 в 11:48
источник
4

Вот что я сделал с bootstrap 3.0.3 и rails 4.0.2:

/* Rails scaffold style compatibility */
#error_explanation {
  @extend .alert;
  @extend .alert-danger;
  width: inherit;
}

.field_with_errors {
  @extend .has-error;
  display: inherit;
  padding: inherit;
  background-color: inherit;
}
    
ответ дан Leo 07.01.2014 в 21:55
источник
3

Если вы используете SASS с Twitter Bootstrap, вы можете использовать директиву @extend, чтобы применить стили Twitter Bootstrap к классам CSS, созданным Rails. (Поиск GitHub, есть несколько портов Bootstrap / SASS.)

Например:

@import "bootstrap";

/* Rails scaffold style compatibility */
.errorExplanation {
  @extend .alert-message;
  @extend .block-message;
  @extend .error;
}

.fieldWithErrors {
  // pulled from div.clearfix.error
  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
}

Обратите внимание, что стиль Bootstrap Twitter для «ошибки» прикрепляется к селектору div.clearfix, что мешает нам просто сделать это:

.fieldWithErrors {
  @extend .error;
}

Итак, вместо этого я скопировал / вставил код из определения Bootstrap для div.clearfix.error в мой селектор .fieldWithErrors.

    
ответ дан flowdelic 05.01.2012 в 16:02
источник
1

Вы можете использовать драгоценный камень Formtastic Bootstrap для создания щебетать с удобной загрузкой с помощью Formtastic.

    
ответ дан Matthew Bellantoni 12.12.2011 в 16:36
источник
1

Ниже приводится то, что я придумал.

Я добавил это в свой css

.field_with_errors {
    display:inline;
    margin:0px;
    padding:0px;
}

Я добавил это к <head>

$(function(){
    $('.field_with_errors').addClass('control-group error');
});
    
ответ дан Dwight Scott 13.11.2012 в 20:48
источник
1

У меня недостаточно комментариев, поэтому я отвечу здесь:

Чтобы добавить к ответу @iosctr - css начал работать только после того, как я добавил в свой файл bootstrap_and_overrides.css.scss :

@import "bootstrap";
body { padding-top: 40px; }
@import "bootstrap-responsive";

#error_explanation {
  @extend .alert;
  @extend .alert-error;
  @extend .alert-block; 
}

.field_with_errors {
  @extend .control-group.error;
} 
    
ответ дан Vadym Tyemirov 27.06.2013 в 01:45
источник
1

Создайте config/initializers/field_with_errors.rb с помощью:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  "<div class=\"error\">#{html_tag}</div>".html_safe
end

Это заменит .field-with-errors на .error .

Однако самая большая проблема, которую я обнаружил с помощью Rails-way, заключается в том, что она обертывает элемент новым div вместо простого добавления класса к самому элементу. Я предпочитаю это:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  parts = html_tag.split('>', 2)
  parts[0] += ' class="field_with_errors">'
  (parts[0] + parts[1]).html_safe
end
    
ответ дан Ryan Anthony 17.10.2016 в 21:09
источник
0

На самом деле это более раздражает, чем вы думаете.

В итоге я создал свои собственные тег-помощники (которые мне нужны и для других целей), хотя я начал с просто переопределения ActionView::Base.field_error_proc . (Это история для себя, поскольку она проходит в строке, а не на самом деле, с которой вы можете надежно сражаться: (

Но начните с этого и посмотрите, действительно ли он для вас достаточно, иначе подготовьтесь к некоторым копаниям и настройке.

    
ответ дан Dave Newton 17.09.2011 в 16:01
источник
0

Существует очень простое решение для всего этого беспорядка. Это javascript, но он решил мои проблемы - просто добавьте это (когда вы используете горизонтальную форму):

$(document).ready(function() {
    $('.field_with_errors').parent().addClass('error');
});

В основном он принимает по умолчанию поведение Rails и преобразовывает его в Bootstrap. Добавление класса ошибки в control-group , где он принадлежит. Нет css и не переопределяет значение по умолчанию field_error_proc .

    
ответ дан oded 24.06.2013 в 19:26
источник
0

С bootstrap 3.0 класс has-error . Решение @ oded должно быть:

$('.field_with_errors').parent().addClass('has-error');
    
ответ дан Tulio Casagrande 12.10.2013 в 20:35
источник
0

Bootstrap 3 и Rails 4 - мне пришлось сделать следующее:

.alert-error{
    color: #f00;
    @extend .alert;
    @extend .alert-danger;
}

#error_explanation
{   ul
    {
        list-style: none;
        margin: 0 0 18px 0;
        color: red
    }
}

.field_with_errors
{
    input {
    border: 2px solid red;
    }
}
    
ответ дан Ady 30.08.2014 в 02:56
источник