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>

이는 다음과 같다 :

어떻게이 모양 변화를 피할 수 있을까?

해결법

==============================
1.당신은 ActionView :: Base.field_error_proc를 오버라이드 (override) 할 필요가 있습니다. 그것은 현재 ActionView :: 자료에서이 같이 정의되어 :

당신은 ActionView :: Base.field_error_proc를 오버라이드 (override) 할 필요가 있습니다. 그것은 현재 ActionView :: 자료에서이 같이 정의되어 :
```
 @@field_error_proc = Proc.new{ |html_tag, instance| 
   "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
 }
```
당신은 설정 / application.rb 내에서 응용 프로그램의 클래스에서 이것을 넣어 그것을 대체 할 수 있습니다 :
```
config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
  html_tag
}
```
다시 시작 시행한다이 변경 서버를 레일.
==============================
2.div 요소가 블록 요소이기 때문에 당신이보고있는 시각 차이가 일어나고있다. 이 인라인 요소처럼 동작 확인하기 위해 CSS 파일에이 스타일을 추가합니다 :

div 요소가 블록 요소이기 때문에 당신이보고있는 시각 차이가 일어나고있다. 이 인라인 요소처럼 동작 확인하기 위해 CSS 파일에이 스타일을 추가합니다 :
```
.field_with_errors { display: inline; }
```
==============================
3.나는 현재 초기화에 배치이 솔루션을 사용합니다 :

나는 현재 초기화에 배치이 솔루션을 사용합니다 :
```
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
```
이 날은 단지 추가 요소를 생성하지 않고, 해당 태그에 클래스 이름을 추가 할 수 있습니다.
==============================
4.여분의 코드는 ActionView에 의해 추가되는 :: Base.field_error_proc. 당신은 스타일 양식을 field_with_errors을 사용하지 않는 경우 application.rb에서 그것을 대체 할 수 있습니다 :

여분의 코드는 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 }
```
==============================
5.당신이 <= 레이블 "...">와 같은 클래스 속성, 다른 태그가있을 때 작업을하지 않는 @phobetron 응답, < "내-아이콘 아이콘"내가 클래스 =>의 또한 내 필드 < / 라벨>.

당신이 <= 레이블 "...">와 같은 클래스 속성, 다른 태그가있을 때 작업을하지 않는 @phobetron 응답, < "내-아이콘 아이콘"내가 클래스 =>의 또한 내 필드 < / 라벨>.

나는 그의 솔루션에 대한 일부 변경했다 :
```
# 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
```
==============================
6.나는 레일 5 구체화-말대꾸 함께 일하고 나는 아래 이미지와 같이 치료 실패 현장 검증에 레일에서 기본 동작과 몇 가지 문제가 무엇입니까 그것은 때문에 유효성 검증 실패를 입력 필드에 추가 여분의 DIV이었다.

나는 레일 5 구체화-말대꾸 함께 일하고 나는 아래 이미지와 같이 치료 실패 현장 검증에 레일에서 기본 동작과 몇 가지 문제가 무엇입니까 그것은 때문에 유효성 검증 실패를 입력 필드에 추가 여분의 DIV이었다.

@Phobetron 응답 작업이 너무 휴고 Demiglio의 답변을 수정. 나는 코드의 그 블록에 일부 조정을 나는 다음과 같은 경우에 잘 작동 뭔가를 얻을 :

모든 경우에 오류 클래스는 클래스 속성의 기존 클래스의 경우 존재 추가됩니다하거나 라벨 또는 입력 태그에없는 경우가 생성됩니다.
```
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
```
나는 그것이 나 같은 동일한 조건을 가진 사람을 위해 도움이 될 수 있기를 바랍니다.
==============================
7.어떤 이유로 당신은 여전히 레일 2에서 작업하는 경우 여기에 SO 게시물을 체크 아웃 (내가 같은).

어떤 이유로 당신은 여전히 레일 2에서 작업하는 경우 여기에 SO 게시물을 체크 아웃 (내가 같은).

그것은 초기화에 넣어하는 스크립트를 제공합니다.
==============================
8.(나는이 오늘을 통해 작업 발견으로) 한 가지 유념해야 할 점은 당신이 (내가 바로 입력 필드의 모든 떠있어) 라벨 또는 입력 필드 중 하나를 떠 경우 ActionView를 오버라이드 (override)하는 경우는 CSS가 손익분기 것입니다 :: Base.field_error_proc.

(나는이 오늘을 통해 작업 발견으로) 한 가지 유념해야 할 점은 당신이 (내가 바로 입력 필드의 모든 떠있어) 라벨 또는 입력 필드 중 하나를 떠 경우 ActionView를 오버라이드 (override)하는 경우는 CSS가 손익분기 것입니다 :: Base.field_error_proc.

대안과 같이 서식 CSS에 깊은 수준을 삭제하는 것입니다 :
```
.field_with_errors label {
  padding: 2px;
  background-color: red;
}

.field_with_errors input[type="text"] {
  padding: 3px 2px;
  border: 2px solid red;
}
```

==============================

9.나는 일부 개체에 대한이 끔찍한 일을 사용하지 않도록 설정하는 옵션을했다

나는 일부 개체에 대한이 끔찍한 일을 사용하지 않도록 설정하는 옵션을했다

# config/initializers/field_error_proc.rb

module ActiveModel::Conversion
  attr_accessor :skip_field_error_wrapper
end

ActionView::Base.field_error_proc = Proc.new {|html_tag, instance|
  if instance.object && instance.object.skip_field_error_wrapper
    html_tag.html_safe
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end
}

그래서 다음과 같이 사용할 수 있습니다 :

@user.skip_field_error_wrapper = true
form_for(@user) do |f|
  ...
end

==============================
10.이 Phobetron의 대답 @ 위에 건물 내 솔루션입니다. application.rb에이 코드를 배치하여
와 태그는 해당 form.error에 의해 생성 : P는 호출이 fields_with_errors CSS의 태그를 받게됩니다. 나머지는 오류 CSS 클래스를 받게됩니다.

이 Phobetron의 대답 @ 위에 건물 내 솔루션입니다. application.rb에이 코드를 배치하여
와 태그는 해당 form.error에 의해 생성 : P는 호출이 fields_with_errors CSS의 태그를 받게됩니다. 나머지는 오류 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
}
```
나는 가장 유연하고 스타일 이전 내 모든 형태에서 응답의 눈에 거슬리지이 방법을 발견했다.
==============================
11.그냥 (당신이 사업부를 신경 쓰지 않는다) 목적으로 스타일링을위한 있다면, 당신은 당신의 CSS에이를 추가 할 수 있습니다 :

그냥 (당신이 사업부를 신경 쓰지 않는다) 목적으로 스타일링을위한 있다면, 당신은 당신의 CSS에이를 추가 할 수 있습니다 :
```
div.field_with_errors {
 display: inline;
}
```
사업부는 스팬처럼 행동하고 사업부는 블록 요소이기 때문에 그것은 (디자인을 방해하지 않습니다 - 디스플레이 : 블록 -이 닫힌 후 기본적으로, 그것은 새로운 라인을 일으킬 것이다 스팬 인라인, 그것은하지 않도록 ).
==============================
12.그 약 스타일링 문제가 있다면, 우리는 "field_with_errors"를 덮어 쓸 수 있습니다. 그러나 우리의 응용 프로그램에서 그 힘 효과를 다른 형태로, 단지 그 형태로 "field_with_errors"클래스를 덮어 쓰기하는 것이 좋습니다.

그 약 스타일링 문제가 있다면, 우리는 "field_with_errors"를 덮어 쓸 수 있습니다. 그러나 우리의 응용 프로그램에서 그 힘 효과를 다른 형태로, 단지 그 형태로 "field_with_errors"클래스를 덮어 쓰기하는 것이 좋습니다.

고려 'parent_class은'다음 폼의 오류 필드 (오류 필드에 대한 부모 요소 중 어느 하나 형태의 클래스 또는 클래스)에 대한 부모 클래스 중 하나입니다
```
  .parent_class .field_with_errors {
    display: inline;
  }
```
뿐만 아니라, 그것은 우리의 applicaiton의 모든 다른 형태의 방해도되지 않으므로이 문제가 해결됩니다.

또는

우리는 전체 응용 프로그램에 대한 "field_with_errors"의 스타일을 재정의해야한다면, @dontangg는 말했다로
```
.field_with_errors { display: inline; } 
```
수정을 할 것입니다. 희망이 도움이 :)
==============================
13.당신은 단지 특정 요소, 예를 들어,에 대한 오류를 끄려면 체크 박스, 당신은이 작업을 수행 할 수 있습니다 :

당신은 단지 특정 요소, 예를 들어,에 대한 오류를 끄려면 체크 박스, 당신은이 작업을 수행 할 수 있습니다 :
```
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  doc = Nokogiri::HTML::Document.parse(html_tag)
  if doc.xpath("//*[@type='checkbox']").any?
    html_tag
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end
end
```

from https://stackoverflow.com/questions/5267998/rails-3-field-with-errors-wrapper-changes-the-page-appearance-how-to-avoid-t by cc-by-sa and MIT license

'RUBY-ON-RAILS' 카테고리의 다른 글

[RUBY-ON-RAILS] 액티브 쿼리 연합 (0)	2020.02.05
[RUBY-ON-RAILS] 어떻게 레일에서 같은 양식 버튼을 제출 여러 만듭니 까? (0)	2020.02.05
[RUBY-ON-RAILS] accepts_nested_attributes_for find_or_create와? (0)	2020.02.05
[RUBY-ON-RAILS] 어떻게 Arel와 레일에서 LIKE 쿼리를 할까? (0)	2020.02.05
[RUBY-ON-RAILS] 경고 : PATH에서 안전하지 않은 세계 쓰기 가능한 디렉토리 / usr / 지방 / 빈 모드 040777 (0)	2020.02.05

복붙노트

[RUBY-ON-RAILS] 3 레일 : "필드 - 오류가있는"페이지의 모양이 변경 래퍼. 어떻게 이것을 피하기 위해?

3 레일 : "필드 - 오류가있는"페이지의 모양이 변경 래퍼. 어떻게 이것을 피하기 위해?

해결법

1.당신은 ActionView :: Base.field_error_proc를 오버라이드 (override) 할 필요가 있습니다. 그것은 현재 ActionView :: 자료에서이 같이 정의되어 :

2.div 요소가 블록 요소이기 때문에 당신이보고있는 시각 차이가 일어나고있다. 이 인라인 요소처럼 동작 확인하기 위해 CSS 파일에이 스타일을 추가합니다 :

3.나는 현재 초기화에 배치이 솔루션을 사용합니다 :

4.여분의 코드는 ActionView에 의해 추가되는 :: Base.field_error_proc. 당신은 스타일 양식을 field_with_errors을 사용하지 않는 경우 application.rb에서 그것을 대체 할 수 있습니다 :

5.당신이 <= 레이블 "...">와 같은 클래스 속성, 다른 태그가있을 때 작업을하지 않는 @phobetron 응답, < "내-아이콘 아이콘"내가 클래스 =>의 또한 내 필드 < / 라벨>.

6.나는 레일 5 구체화-말대꾸 함께 일하고 나는 아래 이미지와 같이 치료 실패 현장 검증에 레일에서 기본 동작과 몇 가지 문제가 무엇입니까 그것은 때문에 유효성 검증 실패를 입력 필드에 추가 여분의 DIV이었다.

7.어떤 이유로 당신은 여전히 레일 2에서 작업하는 경우 여기에 SO 게시물을 체크 아웃 (내가 같은).

9.나는 일부 개체에 대한이 끔찍한 일을 사용하지 않도록 설정하는 옵션을했다

10.이 Phobetron의 대답 @ 위에 건물 내 솔루션입니다. application.rb에이 코드를 배치하여
와 태그는 해당 form.error에 의해 생성 : P는 호출이 fields_with_errors CSS의 태그를 받게됩니다. 나머지는 오류 CSS 클래스를 받게됩니다.

11.그냥 (당신이 사업부를 신경 쓰지 않는다) 목적으로 스타일링을위한 있다면, 당신은 당신의 CSS에이를 추가 할 수 있습니다 :

12.그 약 스타일링 문제가 있다면, 우리는 "field_with_errors"를 덮어 쓸 수 있습니다. 그러나 우리의 응용 프로그램에서 그 힘 효과를 다른 형태로, 단지 그 형태로 "field_with_errors"클래스를 덮어 쓰기하는 것이 좋습니다.

13.당신은 단지 특정 요소, 예를 들어,에 대한 오류를 끄려면 체크 박스, 당신은이 작업을 수행 할 수 있습니다 :

'RUBY-ON-RAILS' 카테고리의 다른 글

티스토리툴바

3 레일 : "필드 - 오류가있는"페이지의 모양이 변경 래퍼. 어떻게 이것을 피하기 위해?

해결법

1.당신은 ActionView :: Base.field_error_proc를 오버라이드 (override) 할 필요가 있습니다. 그것은 현재 ActionView :: 자료에서이 같이 정의되어 :

2.div 요소가 블록 요소이기 때문에 당신이보고있는 시각 차이가 일어나고있다. 이 인라인 요소처럼 동작 확인하기 위해 CSS 파일에이 스타일을 추가합니다 :

3.나는 현재 초기화에 배치이 솔루션을 사용합니다 :

4.여분의 코드는 ActionView에 의해 추가되는 :: Base.field_error_proc. 당신은 스타일 양식을 field_with_errors을 사용하지 않는 경우 application.rb에서 그것을 대체 할 수 있습니다 :

5.당신이 <= 레이블 "...">와 같은 클래스 속성, 다른 태그가있을 때 작업을하지 않는 @phobetron 응답, < "내-아이콘 아이콘"내가 클래스 =>의 또한 내 필드 < / 라벨>.

6.나는 레일 5 구체화-말대꾸 함께 일하고 나는 아래 이미지와 같이 치료 실패 현장 검증에 레일에서 기본 동작과 몇 가지 문제가 무엇입니까 그것은 때문에 유효성 검증 실패를 입력 필드에 추가 여분의 DIV이었다.

7.어떤 이유로 당신은 여전히 ​​레일 2에서 작업하는 경우 여기에 SO 게시물을 체크 아웃 (내가 같은).

9.나는 일부 개체에 대한이 끔찍한 일을 사용하지 않도록 설정하는 옵션을했다

10.이 Phobetron의 대답 @ 위에 건물 내 솔루션입니다. application.rb에이 코드를 배치하여 와 태그는 해당 form.error에 의해 생성 : P는 호출이 fields_with_errors CSS의 태그를 받게됩니다. 나머지는 오류 CSS 클래스를 받게됩니다.

11.그냥 (당신이 사업부를 신경 쓰지 않는다) 목적으로 스타일링을위한 있다면, 당신은 당신의 CSS에이를 추가 할 수 있습니다 :

12.그 약 스타일링 문제가 있다면, 우리는 "field_with_errors"를 덮어 쓸 수 있습니다. 그러나 우리의 응용 프로그램에서 그 힘 효과를 다른 형태로, 단지 그 형태로 "field_with_errors"클래스를 덮어 쓰기하는 것이 좋습니다.

13.당신은 단지 특정 요소, 예를 들어,에 대한 오류를 끄려면 체크 박스, 당신은이 작업을 수행 할 수 있습니다 :

'RUBY-ON-RAILS' 카테고리의 다른 글

티스토리툴바

7.어떤 이유로 당신은 여전히 레일 2에서 작업하는 경우 여기에 SO 게시물을 체크 아웃 (내가 같은).

10.이 Phobetron의 대답 @ 위에 건물 내 솔루션입니다. application.rb에이 코드를 배치하여
와 태그는 해당 form.error에 의해 생성 : P는 호출이 fields_with_errors CSS의 태그를 받게됩니다. 나머지는 오류 CSS 클래스를 받게됩니다.