이메일 입력란 :
<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