Rails 3: wrapper“ field-with-error” เปลี่ยนลักษณะของเพจ จะหลีกเลี่ยงสิ่งนี้ได้อย่างไร?

ฟิลด์อีเมล:

<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 และMaterialize-Sassและฉันได้รับปัญหาบางอย่างเกี่ยวกับพฤติกรรมเริ่มต้นจาก Rails เพื่อจัดการกับการตรวจสอบฟิลด์ที่ล้มเหลวดังภาพด้านล่างและเป็นเพราะการเพิ่มพิเศษdivในช่องป้อนข้อมูลที่การตรวจสอบล้มเหลว

ทำงานกับคำตอบของ @Phobetron และแก้ไขคำตอบของ Hugo Demiglio ด้วย ฉันได้ทำการปรับเปลี่ยนบล็อกโค้ดเหล่านั้นและพบว่าบางอย่างทำงานได้ดีในกรณีต่อไปนี้:

• หากทั้งสอง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แอตทริบิวต์หากมีอยู่หรือจะถูกสร้างขึ้นหากไม่มีอยู่ในป้ายกำกับหรือแท็กอินพุต

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 ซึ่งไม่ทำงานเมื่อคุณมีแท็กอื่น ๆ <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

หากมีเหตุผลบางอย่างที่คุณยังคงทำงานบนรางที่ 2 (เหมือนผม) ตรวจสอบการโพสต์ SO ที่นี่

มีสคริปต์ที่จะใส่ใน initializers

สิ่งหนึ่งที่ควรจำไว้ (อย่างที่ฉันค้นพบในวันนี้) คือถ้าคุณลอยทั้งป้ายหรือช่องป้อนข้อมูล (ฉันลอยช่องอินพุตทั้งหมดไปทางขวา) css จะหยุดทำงานแม้ว่าคุณจะแทนที่ ActionView :: 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;
}

ฉันได้สร้างตัวเลือกเพื่อปิดการใช้งานสิ่งที่น่ากลัวนี้สำหรับวัตถุบางอย่าง

# 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

นี่คือการสร้างโซลูชันของฉันที่อยู่เหนือคำตอบของ @ Phobetron การวางโค้ดนี้ในและแท็กapplication.rbของคุณที่สร้างโดยการเรียกที่เกี่ยวข้องจะได้รับแท็ก css ส่วนที่เหลือจะได้รับคลาส CSS<p><span>form.error :pfields_with_errorserror

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
}

ฉันพบว่าวิธีนี้มีความยืดหยุ่นและไม่เป็นการรบกวนมากที่สุดจากก่อนหน้านี้ในการจัดรูปแบบการตอบสนองในแบบฟอร์มของฉัน

หากเป็นเพียงจุดประสงค์ในการจัดแต่งทรงผม (คุณไม่สนใจdiv) คุณสามารถเพิ่มสิ่งนี้ใน css ของคุณ:

div.field_with_errors {
 display: inline;
}

สิ่งdivนี้จะทำหน้าที่เหมือน a spanและจะไม่รบกวนการออกแบบของคุณ (เนื่องจากdivเป็นองค์ประกอบบล็อก - display: block;- โดยค่าเริ่มต้นจะทำให้เกิดบรรทัดใหม่หลังจากปิดดังนั้นจึงไม่spanเป็นinlineเช่นนั้น)

หากคุณเพียงต้องการปิดข้อผิดพลาดขององค์ประกอบบางอย่างเช่นช่องทำเครื่องหมายคุณสามารถทำได้:

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

หากเป็นปัญหาเกี่ยวกับการจัดรูปแบบเท่านั้นเราสามารถเขียนทับ "field_with_errors" ได้ แต่เนื่องจากอาจมีผลกับรูปแบบอื่น ๆ ในแอปพลิเคชันของเราจึงเป็นการดีกว่าที่จะเขียนทับคลาส "field_with_errors" ด้วยในรูปแบบนั้นเท่านั้น

การพิจารณา 'parent_class' เป็นหนึ่งในคลาสหลักสำหรับฟิลด์ข้อผิดพลาดของฟอร์ม (ไม่ว่าจะเป็นคลาสของฟอร์มหรือคลาสขององค์ประกอบหลักใด ๆ สำหรับฟิลด์ข้อผิดพลาด) จากนั้น

  .parent_class .field_with_errors {
    display: inline;
  }

มันจะแก้ไขปัญหาและจะไม่รบกวนรูปแบบอื่น ๆ ในแอปพลิเคชันของเราเช่นกัน

หรือ

หากเราต้องการลบล้างรูปแบบของ "field_with_errors" สำหรับแอปพลิเคชันทั้งหมดดังที่ @dontangg กล่าว

.field_with_errors { display: inline; } 

จะทำการแก้ไข หวังว่าจะช่วยได้ :)

หากคุณไม่ต้องการเปลี่ยนfield_error_procแอปพลิเคชันทั้งหมดของคุณการแกะของ jQuery สามารถให้โซลูชันที่ตรงเป้าหมายมากขึ้นสำหรับพื้นที่ปัญหาเฉพาะเช่น

$('FORM .field_with_errors > INPUT[type="checkbox"]').unwrap();

คุณสามารถปิดการใช้งาน<div class="field_with_errors">div พิเศษได้อย่างง่ายดายหากคุณไม่ต้องการเลยสำหรับองค์ประกอบรูปแบบเฉพาะ เช่นถ้าคุณไม่ต้องการมัน<label>'s ใช้กำหนดเองFormBuilder

เช่น:

class MyFormBuilder < ActionView::Helpers::FormBuilder
  # Strip the containing div for labels associated with invalid fields:
  def label(method, text = nil, options = {}, &block)
    super(method, text, options, &block).gsub(%r{<div.*?>|<\/div>}, '').html_safe
  end
end

และจากนั้นทั้งเพิ่ม, builder: MyFormBuilderที่คุณform_with/ form_forในมุมมองหรือเพิ่มdefault_form_builder MyFormBuilderไปยังตัวควบคุมของคุณ (หรือควบคุมฐานถ้าคุณอยากให้มันเป็นพฤติกรรมที่ทั่วโลก)

คุณสามารถทำเช่นเดียวกันสำหรับอินพุตและองค์ประกอบรูปแบบอื่น ๆ ได้เช่นกัน

เครดิตJack Caseyสำหรับคำตอบนี้