Настройка field_with_errors
Есть ли способ сказать 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 - стильных элементов, без классов formtastic css и html, но с загрузочные. Могу ли я сделать что-то с полями ошибки в случае использования formtastic?
Ответы
Ответ 1
@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
}
Ответ 2
если кто-то использует LESS:
в bootstrap_and_overrides.css.less вы можете добавить:
#error_explanation {
.alert();
.alert-error();
.alert-block();
}
.field_with_errors {
.control-group.error();
}
который представляет собой версию LESS показанного примера sass.
Ответ 3
Это то, что работает с Bootstrap 3 при использовании https://github.com/anjlab/bootstrap-rails gem.
.field_with_errors {
@include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
Ответ 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;
}
Ответ 5
Если вы используете 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.
Ответ 6
Вы можете использовать "Форматический бутстрап" , чтобы создать щебетать, удобную для загрузки, с помощью Formtastic.
Ответ 7
Ниже приводится то, что я придумал.
Я добавил это в свой css
.field_with_errors {
display:inline;
margin:0px;
padding:0px;
}
Я добавил это к <head>
$(function(){
$('.field_with_errors').addClass('control-group error');
});
Ответ 8
У меня недостаточно комментариев, поэтому я отвечу здесь:
Чтобы добавить к ответу @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;
}
Ответ 9
Создайте 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
Ответ 10
На самом деле это более раздражает, чем вы думаете.
Я закончил создание собственных помощников тегов (которые мне тоже нужны для других целей), хотя я начал с просто переопределения ActionView::Base.field_error_proc
. (Это история для себя, поскольку она проходит в строке, а не на самом деле, с которой вы можете надежно сражаться: (
Но начните с этого и посмотрите, действительно ли он для вас достаточно, иначе подготовьтесь к некоторым копаниям и настройке.
Ответ 11
Существует очень простое решение для всего этого беспорядка. Это javascript, но он решил мои проблемы - просто добавьте это (когда вы используете горизонтальную форму):
$(document).ready(function() {
$('.field_with_errors').parent().addClass('error');
});
В основном он принимает по умолчанию поведение Rails и преобразовывает его в Bootstrap. Добавление класса ошибки в control-group
, где оно принадлежит.
Нет css
и не отменяет значение по умолчанию field_error_proc
.
Ответ 12
С bootstrap 3.0 класс has-error
. @oded решение должно быть:
$('.field_with_errors').parent().addClass('has-error');
Ответ 13
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;
}
}