Rails 3: оболочка "field-with-errors" меняет внешний вид страницы. Как этого избежать?

Question

Адрес электронной почты:

<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>

, который выглядит так:

Как можно избежать этого изменения внешности?

Answer 1

Это моё решение, основанное на ответе @ Phobetron. Поместив этот код в application.rb, ваши теги <p> и <span>, сгенерированные соответствующими вызовами form.error :p, получат тег fields_with_errors css. Остальные получат класс error CSS.

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
  class_attr_index = html_tag.index 'class="'

  if class_attr_index
    # target only p's and span's with class error already there
    error_class = if html_tag =~ /^<(p|span).*error/
      'field_with_errors '
    else
      'error '
    end

    html_tag.insert class_attr_index + 7, error_class
  else
    html_tag.insert html_tag.index('>'), ' class="error"'
  end
}

Я нашел этот способ наиболее гибким и ненавязчивым из всех предыдущих для определения стиля ответов в моих формах.

Answer 2

Если речь идет только о проблемах со стилем, мы можем перезаписать «field_with_errors». Но так как это может повлиять на другие формы в нашем приложении, лучше переписать класс "field_with_errors" только в этой форме.

Учитывая, что parent_class является одним из родительского класса для поля ошибки формы (либо класса формы, либо класса любого из родительского элемента для поля ошибки), тогда

  .parent_class .field_with_errors {
    display: inline;
  }

Это исправит проблему, а также не повлияет на другие формы в нашем приложении.

OR

Если нам нужно переопределить стиль «field_with_errors» для всего приложения, то, как сказал @dontangg,

.field_with_errors { display: inline; } 

сделает исправление. Надеюсь, это поможет:)