Within a rails application, I have customized the field_error_proc to enable inline error displays as shown below:
https://i.sstatic.net/DjmdN.png
The code snippet for achieving this functionality is outlined here:
ActionView::Base.field_error_proc = proc { |html_tag, instance|
html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe
form_fields = %w[textarea input select]
elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css 'label, ' + form_fields.join(', ')
elements.each do |e|
next unless form_fields.include?(e.node_name)
errors = [instance.error_message].flatten.uniq.collect { |error| "#{instance.method_name.humanize} #{error}" }
html = %(<div class="field_with_errors">#{html_tag}</div><small class="form-text error-text"> #{errors.join(', ')}</small>).html_safe
end
html
}
This approach works effectively for standard inputs that are wrapped in a usual manner.
An issue arises when the input is enclosed within another element, such as a select2 dropdown or a custom input group illustrated below:
<div class="split-daterange-picker form-control daterange-picker" id="">
<input class="start-date" placeholder="Requested Dates" type="text" name="housing_lead[start_date]">
<span class="separator"></span>
<input class="end-date" placeholder="Requested Dates" type="text" name="housing_lead[end_date]">
</div>
For my scenario of using two inputs functioning as one form field: https://i.sstatic.net/YHJTb.png
However, when these inputs are enveloped by the field_with_errors div, the display appears as follows:
https://i.sstatic.net/mKdLv.png
To address this concern, my objective is to wrap the split-daterange-picker within the field_with_errors div to allow proper styling and the addition of error messages. How can I achieve this desired outcome?