CODEWITHSUNDEEP
ruby-on-railsclient-side-validation
Dmytro Vasin
Dmytro Vasin

Reputation: 823

Rails client_side_validation customizing

I use client_side_validation gem and have question: in my client_side_validation.rb i have 

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

and in output i have: 

<div>
  Name:
   <br>
   <div class="field_with_errors">
     <input id="user_username" type="text" size="30" name="user[username]"data-validate="true">
     <label class="message" for="user_username">Only letters allowed</label>
   </div>
</div>

i don't want use label :

<label class="message" for="user_username">Only letters allowed</label>

how can i get somthing like this:

<div class="message">Only letters allowed</div>

i tried put in my rb file :

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  unless html_tag =~ /^<label/
    %{<div class="field_with_errors">#{html_tag}<div class="message">#{instance.error_message.first}</div></div>}.html_safe
  else
    %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
  end
end

and restart server - but in this case i received only empty div with class message

help pls.. how change standart label to Div ?

Upvotes: 2

Views: 973

Answers (1)

d_ethier
d_ethier

Reputation: 3911

There are two steps to overriding error messaging in client_side_validations, you either have to modify the ActionView::Base.field_error_proc or just the rails.validations.coffee (or JS).

For what you're trying to do, you don't need the field_error_proc changes. You can do it like this:

window.ClientSideValidations.formBuilders['ActionView::Helpers::FormBuilder'] = {
  add: function(element, settings, message) {
    $(element).after($('<div>').attr('class', 'message').html(message));
  },
  remove: function(element, settings) {
    $(element).next().remove();
  }
}

Upvotes: 2

Related Questions