[ruby-on-rails] Rails 3 : "오류가있는 필드"래퍼가 페이지 모양을 변경합니다. 이것을 피하는 방법?

이메일 입력란 :

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

이것은 다음과 같습니다

이 모양 변경을 어떻게 피할 수 있습니까?

답변

재정의해야합니다 ActionView::Base.field_error_proc. 현재 다음과 같이 정의되어 있습니다 ActionView::Base.

 @@field_error_proc = Proc.new{ |html_tag, instance|
   "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
 }

이것을 응용 프로그램의 클래스 안에 넣으면 재정의 할 수 있습니다 config/application.rb.

config.action_view.field_error_proc = Proc.new { |html_tag, instance|
  html_tag
}

이 변경 사항을 적용하려면 레일 서버를 다시 시작하십시오.

답변

div요소가 블록 요소 이므로 시각적 차이가 발생합니다 . 인라인 요소처럼 작동하도록 CSS 파일에이 스타일을 추가하십시오.

.field_with_errors { display: inline; }

답변

나는 현재이 솔루션을 사용하여 초기화 프로그램에 배치했습니다.

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  class_attr_index = html_tag.index 'class="'

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

이를 통해 추가 요소를 만들지 않고도 클래스 이름을 해당 태그에 추가 할 수 있습니다.

답변

에 의해 추가 코드가 추가되고 ActionView::Base.field_error_proc있습니다. field_with_errors양식에 스타일을 지정 하지 않는 경우 다음 에서 재정의 할 수 있습니다 application.rb.

config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe }

또는 UI에 적합한 것으로 변경할 수 있습니다.

config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<span class='field_with_errors'>#{html_tag}</span>".html_safe }

답변

Rails 5 및 Materialise-Sass 와 함께 일하고 있으며 아래 이미지와 같이 실패한 필드 유효성 검사를 처리하기 위해 Rails의 기본 동작과 관련된 문제가 발생 div했습니다. 이는 유효성 검사가 실패한 입력 필드에 추가로 인해 발생했습니다.

@Phobetron 답변으로 작업하고 Hugo Demiglio의 답변도 수정하십시오. 해당 코드 블록을 조정하여 다음과 같은 경우에 잘 작동합니다.

두 경우 input와는 label자신이 class속성 어디서나
- <input type="my-field" class="control">
- <label class="active" for="...">My field</label>
는 IF 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존재하는 경우 속성 의 기존 클래스에 추가 되거나 레이블 또는 입력 태그에 없으면 클래스 가 작성됩니다 .

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
    class_attr_index = html_tag.index('class="')
    first_tag_end_index = html_tag.index('>')

    # Just to inspect variables in the console
    puts '? ' * 50
    pp(html_tag)
    pp(class_attr_index)
    pp(first_tag_end_index)

    if class_attr_index.nil? || class_attr_index > first_tag_end_index
        html_tag.insert(first_tag_end_index, ' class="error"')
    else
        html_tag.insert(class_attr_index + 7, 'error ')
    end

    # Just to see resulting tag in the console
    pp(html_tag)
end

나는 그것이 나와 같은 조건을 가진 사람에게 유용 할 수 있기를 바랍니다.

답변

@phobetron answer 외에도 클래스 속성이있는 다른 태그가있는 경우 작동하지 않습니다 <label for="..."><i class="icon my-icon"></i>My field</label>.

나는 그의 해결책을 약간 변경했다.

# config/initializers/field_with_error.rb

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  class_attr_index = html_tag.index('class="')
  first_tag_end_index = html_tag.index('>')

  if class_attr_index.nil? || first_tag_end_index > class_attr_index
    html_tag.insert(class_attr_index + 7, 'error ')
  else
    html_tag.insert(first_tag_end_index, ' class="error"')
  end
end

답변

어떤 이유로 든 여전히 Rails 2에서 일하고 있다면 (예 : 나는) SO 게시물을 확인 하십시오. .

이니셜 라이저에 넣을 스크립트를 제공합니다.