ruby on rails client side validation custom style

Question

i am using the client_side_validation gem for my rails project, and i am attempting to restyle the error messages to fit in with the standard foundation 4 styling. i have the error styling being applied correctly, but i cannot get the message to be transposed to the template

client_side_validations.rb

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
   unless html_tag =~ /^<label/
     %{<div class="error">#{html_tag}<small id="#{instance.send(:tag_id)}" class="error">#{instance.error_message.first}</small></div>}.html_safe
   else
     %{<div class="error">#{html_tag}</div>}.html_safe
   end
end

rails.validations.js

window.ClientSideValidations.formBuilders = {
    'ActionView::Helpers::FormBuilder': {
      add: function(element, settings, message) {
        var form, inputErrorField, label, labelErrorField;
        form = $(element[0].form);
        if (element.data('valid') !== false && !(form.find("small.error[id='" + (element.attr('id')) + "']")[0] != null)) {
          inputErrorField = jQuery(settings.input_tag);
          labelErrorField = jQuery(settings.label_tag);
          label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)");
          if (element.attr('autofocus')) {
            element.attr('autofocus', false);
          }
          element.before(inputErrorField);
          inputErrorField.find('span#input_tag').replaceWith(element);
          inputErrorField.find('label.error').attr('for', element.attr('id'));
          labelErrorField.find('label.error').attr('for', element.attr('id'));
          labelErrorField.insertAfter(label);
          labelErrorField.find('label#label_tag').replaceWith(label);
        }
        return form.find("small.error[id='" + (element.attr('id')) + "']").text(message);
      },
      remove: function(element, settings) {
        var errorFieldClass, form, inputErrorField, label, labelErrorField;
        form = $(element[0].form);
        errorFieldClass = jQuery(settings.input_tag).attr('class');
        inputErrorField = element.closest("." + (errorFieldClass.replace(" ", ".")));
        label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)");
        labelErrorField = label.closest("." + errorFieldClass);
        if (inputErrorField[0]) {
          inputErrorField.find("#" + (element.attr('id'))).detach();
          inputErrorField.replaceWith(element);
          label.detach();
          return labelErrorField.replaceWith(label);
        }
      }
    }
  };

Answer 1

changed the following piece of code and all seems to be working correctly now with foundation

window.ClientSideValidations.formBuilders = {
'ActionView::Helpers::FormBuilder': {
  add: function(element, settings, message) {
    var form, inputErrorField, label, labelErrorField;
    form = $(element[0].form);
    if (element.data('valid') !== false && !(form.find("small.error[id='" + (element.attr('id')) + "']")[0] != null)) {
      inputErrorField = jQuery(settings.input_tag);
      labelErrorField = jQuery(settings.label_tag);
      label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)");
      if (element.attr('autofocus')) {
        element.attr('autofocus', false);
      }
      element.before(inputErrorField);
      inputErrorField.find('span#input_tag').replaceWith(element);
      inputErrorField.find('small.error').attr('id', element.attr('id'));
      labelErrorField.find('small.error').attr('id', element.attr('id'));
      labelErrorField.insertAfter(label);
      labelErrorField.find('label#label_tag').replaceWith(label);
    }
    return form.find("small.error[id='" + (element.attr('id')) + "']").text(message);
  },
  remove: function(element, settings) {
    var errorFieldClass, form, inputErrorField, label, labelErrorField;
    form = $(element[0].form);
    errorFieldClass = jQuery(settings.input_tag).attr('class');
    inputErrorField = element.closest("." + (errorFieldClass.replace(" ", ".")));
    label = form.find("label[for='" + (element.attr('id')) + "']:not(.error)");
    labelErrorField = label.closest("." + errorFieldClass);
    if (inputErrorField[0]) {
      inputErrorField.find("#" + (element.attr('id'))).detach();
      inputErrorField.replaceWith(element);
      label.detach();
      return labelErrorField.replaceWith(label);
    }
  }
}
  };