Поле электронной почты:
<label for="job_client_email">Email: </label>
<input type="email" name="job[client_email]" id="job_client_email">
выглядит так:
Но, если проверка адреса электронной почты завершится неудачно, он станет:
<div class="field_with_errors">
<label for="job_client_email">Email: </label>
</div>
<div class="field_with_errors">
<input type="email" value="wrong email" name="job[client_email]" id="job_client_email">
</div>
который выглядит так:
Как я мог избежать такого изменения внешнего вида?
ruby-on-rails
ruby-on-rails-3
validation
field-with-errors
Миша Морошко
источник
источник
Ответы:
Вы должны переопределить
ActionView::Base.field_error_proc
. В настоящее время это определяется как это вActionView::Base
:Вы можете переопределить это, поместив это в свой класс приложения внутри
config/application.rb
:Перезапустите сервер rails, чтобы это изменение вступило в силу.
источник
label
иinput
заворачивают? Как Rails решает, что обернуть?f.label :password
иf.password_field :password
в этом@resource.errors
будет установлена[:password]
ошибка.Визуальная разница, которую вы видите, происходит потому, что
div
элемент является блочным. Добавьте этот стиль в свой файл CSS, чтобы он вел себя как встроенный элемент:источник
display:
используемые свойства (и другие стили макета) вhtml_tag
.display
Свойство используется перед этим КСС добавляемого ,block
которая вызывает визуальное различие, не желательно. Это не отменяет никаких других стилей макета тега. Однако ответ Райана Бигга идеален, если вы хотите изменить / удалить тег, который обертывает поле с ошибками.В настоящее время я использую это решение, помещенное в инициализатор:
Это позволяет мне просто добавить имя класса к соответствующему тегу, не создавая дополнительных элементов.
источник
label
.Дополнительный код добавляется пользователем
ActionView::Base.field_error_proc
. Если вы не используетеfield_with_errors
стиль для своей формы, вы можете переопределить его вapplication.rb
:Кроме того, вы можете изменить его на то, что подходит вашему пользовательскому интерфейсу:
источник
Я работаю с Rails 5 и Materialize-Sass, и у меня возникают некоторые проблемы с поведением Rails по умолчанию для обработки неудачных проверок полей, как на изображении ниже, и это было из-за дополнительных
div
добавленных в поля ввода полей, где проверка не удалась.Работа с ответом @Phobetron и изменение ответа Хьюго Демильо. Я внес некоторые изменения в эти блоки кода, и у меня что-то работает хорошо в следующих случаях:
input
иlabel
есть собственныйclass
атрибут где угодно<input type="my-field" class="control">
<label class="active" for="...">My field</label>
input
илиlabel
не имеютclass
атрибута<input type="my-field">
<label for="...">My field</label>
label
внутри тега есть другой тег сclass attribute
<label for="..."><i class="icon-name"></i>My field</label>
Во всех этих случаях
error
класс будет добавлен к существующим классам вclass
атрибуте, если они существуют, или он будет создан, если его нет в метке или тегах ввода .Я надеюсь, что это может быть полезно для кого-то с такими же условиями, как я.
источник
В дополнение к ответу @phobetron, который не работает, когда у вас есть другой тег с атрибутом класса, например
<label for="..."><i class="icon my-icon"></i>My field</label>
.Я внес некоторые изменения в его решение:
источник
Если по какой-то причине вы все еще работаете над Rails 2 (как и я), ознакомьтесь с публикацией SO здесь .
Он предлагает сценарий для установки инициализаторов.
источник
Одна вещь, о которой следует помнить (как я обнаружил, работая над этим сегодня), заключается в том, что если вы разместите либо метку, либо поля ввода (я плаваю все поля ввода правильно), css сломается, даже если вы переопределите ActionView :: Base.field_error_proc.
Альтернативой является снижение уровня форматирования CSS следующим образом:
источник
Я сделал возможность отключить эту ужасную вещь для некоторых объектов
Так что можно использовать это так:
источник
Это мое решение, основанное на ответе @ Phobetron. Размещение кода в
application.rb
ваших<p>
и<span>
теги , генерируемые соответствующихform.error :p
вызовы получатfields_with_errors
CSS тег. Остальные получатerror
класс CSS.Я нашел этот способ наиболее гибким и ненавязчивым из всех предыдущих для стилизации ответа в моих формах.
источник
Если это просто для стилизации (вы не против
div
), вы можете просто добавить это в свой css:Он
div
будет действовать как aspan
и не будет мешать вашему дизайну (посколькуdiv
это блочный элемент -display: block;
- по умолчанию он вызовет новую строку после закрытия;span
естьinline
, поэтому это не так).источник
Если вы просто хотите отключить ошибки для определенных элементов, например флажков , вы можете сделать это:
источник
Если речь идет только о стилях, мы можем перезаписать field_with_errors. Но поскольку это может повлиять на другие формы в нашем приложении, лучше перезаписать класс field_with_errors только в этой форме.
Учитывая, что 'parent_class' является одним из родительских классов для поля ошибки формы (либо класс формы, либо класс любого родительского элемента для поля ошибки), тогда
Это устранит проблему, а также не повлияет на другие формы в нашем приложении.
ИЛИ
Если нам нужно переопределить стиль "field_with_errors" для всего приложения, тогда, как сказал @dontangg,
сделаю исправление. Надеюсь, поможет :)
источник
Если вы не хотите вносить изменения
field_error_proc
для всего приложения, развертка jQuery может предоставить более целенаправленное решение для конкретных проблемных областей, например,источник