Customize Error Rendering - Add an icon before the error message

[Pacn91]

First of all thanks for this awesome gem. Let me clarify that this is not an issue but a question.

I don't understand much about changing the error message and I hope someone can help me. I just wanted to add an icon before the #{instance.error_message.first} in the client_side_validations.rb file. Something like this:

%(<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message"><i class="fas fa-exclamation-triangle"></i>#{instance.error_message.first}</label></div>).html_safe

I understand if I change the markup I will also need to modify the ClientSideValidations.formBuilders['ActionView::Helpers::FormBuilder'] add and remove functions but I really don't understand what I need to add or remove to just add an icon tag...can someone make me an example?

Thank you in advance

[tagliala]

Hi,

sorry for the late reply. I'm maintaining this gem in my free time

I just wanted to add an icon before the #{instance.error_message.first} in the client_side_validations.rb

The content of the initializer affects the field error when it is returned from the server by the default Rails FormBuilder. In other words, it does not have impact if you are using simple_form and does not affect the javascript client side validation messages.

If you want to customize the javascript client side validation error message, please do something like this.

In my example, I'm using simple_form, client_side_validations-simple_form plugin, bootstrap 4, and coffeescript.

1. Copy the default error messages to your asset path (in my case: https://github.com/DavyJonesLocker/client_side_validations-simple_form/blob/master/coffeescript/rails.validations.simple_form.bootstrap4.coffee)

2. Customize with your own code

ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] =
  add: (element, settings, message) ->
    @wrapper(settings.wrapper).add.call(@, element, settings, message)
  remove: (element, settings) ->
    @wrapper(settings.wrapper).remove.call(@, element, settings)
  wrapper: (name) ->
    @wrappers[name] || @wrappers.default

  wrappers:
    default:
      add: (element, settings, message) ->
        wrapperElement   = element.parent()
        errorElement     = wrapperElement.find("#{settings.error_tag}.invalid-feedback")
        errorElementIcon = $('<span>', { class: 'fas fa-exclamation-triangle' })

        unless errorElement.length
          errorElement = $("<#{settings.error_tag}/>", { class: 'invalid-feedback' })
          wrapperElement.append errorElement

        wrapperElement.addClass settings.wrapper_error_class
        element.addClass 'is-invalid'
        errorElement.text " #{message}"
        errorElement.prepend errorElementIcon

      remove: (element, settings) ->
        wrapperElement = element.parent()
        errorElement   = wrapperElement.find("#{settings.error_tag}.invalid-feedback")

        wrapperElement.removeClass settings.wrapper_error_class
        element.removeClass 'is-invalid'
        errorElement.remove()

3. Change the asset pipeline accordingly

Hope it helps

Closing here, but feel free to comment