I'm constructing a simple form in ERB but the HTML produced by the text_field tag makes the for attribute in the label tag invalid.
<div>
<p><%= label_tag "email[name]", "Name" %></p>
<%= text_field :email, :name, :class => "text_field" %>
</div>
Produces the HTML
<div>
<p><label for="email[name]">Name</label></p>
<input class="text_field" id="email_name" name="email[name]" size="30" type="text" />
</div>
Which results in the error
character "[" is not allowed in the
value of attribute "for".
How do I generate the text with without the nested parameter name email[name] to change the label tag for attribute? Is there an alternative approach that produces valid HTML?
The for attribute is supposed to reference the ID attribute of the element for which it is the label, not its name.
Therefore, don't you need:
<div>
<p><%= label_tag "email_name", "Name" %></p>
<%= text_field :email, :name, :class => "text_field" %>
</div>
...?
Take it out of the quotes, or generate the div content as a string and add it to the div.innerHTML
Related
The code illustrating the bug is from a Redmine plugin. A _form.html.erb partial contains this fields_for:
<%= f.fields_for :information do |information| %>
<p><%= information.text_field :middlename, :label => l(:label_people_middlename) %></p>
<p><%= f.text_field :lastname, :required => true %></p>
Then one of the fields declares a label:
<p><%= information.select :gender, Person.get_genders, :label => l(:label_people_gender)%></p>
That generates this HTML:
<p><label for="person[information_attributes]_gender">Gender</label>
<select name="person[information_attributes][gender]" id="person_information_attributes_gender">
<option selected="selected" value="0">Male</option>
<option value="1">Female</option>
</select></p>
The <label for=""> value has [] in it instead of underscores _, so it does not match the target field's id="person_information_attributes_gender". Clicking on the label does not put the keyboard focus into that <select> field.
Is this a known bug in Rails 4.2.8? Is there a fix or workaround available - besides just writing the <label> in raw HTML?
What happens if you try using an actual Rails label, instead of passing label as an option to the 'select'? (I'll be honest, I haven't actually seen the label option on a select like that, before). Something like this:
<p>
<%= information.label :gender, l(:label_people_gender) %>
<%= information.select :gender, Person.get_genders %>
</p>
I want to put this: <%= f.text_field :name %>
into the code below, but I keep getting an error. How can I properly embed it so that the code will work. Thanks!
<form>
<div class="form-group">
<input type= class="form-control" id="exampleInputEmail1" placeholder="Enter Value">
</div>
</form>
You dont' need the whole input section, just do this :
<%= f.text_field :name , :class=> "form-control"%>
Just add bootstrap classes into your code via parameter :class
Use Formtastic Bootstrap it's a gem for rails, create forms with automatic bootstrap class
'f' is not instantiated in you code so following code will raise error in the form-
<%= f.text_field :name %>
alternatively you can use this -
<%= text_field_tag :name,'', :placeholder => "Enter Value", :class=>"form-control", :id=>"exampleInputEmail1" %>
this will not raise any error on embedding in the form.
I would like to add a span element to my i18n localized label in Rails 3.2.3.
This is what I've got:
<%= f.label :address, "<span class=\"optional\">optional</span>".html_safe %>
However, in the output it produces:
<label for="person_address">
<span class="optional">optional</span>
</label>
What I need is this:
<label for="person_address">
Address <span class="optional">optional</span>
</label>
Can anybody tell me how to do this?
use the block form and translate the attribute name "manually" :
<%= f.label :address do %>
<%= f.object.class.human_attribute_name :address %>
<span class="optional">optional</span>
<% end %>
note
The second parameter in the 'label' helper will be the text of the label. If you did this:
<%= f.label :address, "Address <span class=\"optional\">optional</span>".html_safe %>
It would show correctly, I think.
You an also add html to the yml file and use .html_safe on the yml item explicitly it would also work.
<%= f.label :address, t('path.to.label').html_safe %>
I'd also be tempted to try something with javascript and css - to class the field and add something via jquery or with a css :after to the label.
I am using validates_acceptance_of :terms, :message => "must be accepted" in my user.rb model, and am using bootstrap-sass.
My check box code looks like this in the view:
<div class="control-group">
<%= f.label :terms, :class => "control-label" do %>
Accept <%= link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal") %>
<% end %>
<div class="controls">
<%= f.check_box :terms %>
</div>
</div>
For some reason, when the terms check box isn't selected on form submission, the appropriate error message shows up at the top of the form, but there is a problem with the field_with_errors div class wrapping around the check box label.
The HTML for the rendered page looks like this:
<div class="control-group">
<label class="control-label" for="user_terms">
Accept Terms of Use *
</label>
<div class="controls">
<input name="user[terms]" type="hidden" value="0" />
<div class="field_with_errors">
<input id="user_terms" name="user[terms]" type="checkbox" value="1" />
</div>
</div>
</div>
The result is that the check box field label isn't highlighted on error. Is there a way to force the div tag placement for the field_with_errors class to show up just after the <div class="control-group"> tag? Why does using a block to define a field label throw off the field_with_errors tag placement? Does anyone have experience with this?
Thank you
This is a bug i think. The problem is in block. Define your label without block and everything works.
Try something like:
<% modal_html = capture do >
Accept <%= link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal") %>
<% end %>
<%= f.label :terms, modal_html, :class => "control-label" %>
Or helper:
def modal_html
#Q{Accept #{link_to('Terms of Use *', "#myTOUModal", :"data-toggle" => "modal")} }.html_safe
end
When I try to create a category by using Ajax I get a strange behavior with my error message.
Right now I have my error message appearing like this:
My create.js.erb and new.js.erb both have the same code which is just this line:
$(".cc-form").html("<%= escape_javascript(render(:partial => 'categories/form', locals: { category: #category })) %>");
This is my category form:
<%= form_for(#category, :remote => true, :html => { :class => "add-form", :id => "cform" }) do |f| %>
<fieldset>
<p>
<%= f.label :name, "Category Name *" %>
<br />
<%= f.text_field :name %>
</p>
<div class="form-actions">
<%= f.submit "Create" %>
</div>
</fieldset>
Here is the code to enable custom error HTML:
# application.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
errors = Array(instance.error_message).join(',')
%(#{html_tag}<span class="validation-error"> #{errors}</span>).html_safe
end
Then the HTML itself along with the error HTML:
<p>
<label for="category_name">Category Name *</label><span class="validation-error"> can't be blank</span>
<br>
<input id="category_name" name="category[name]" size="30" type="text" value=""><span class="validation-error"> can't be blank</span>
</p>
I only want the error message next to the label and not the right side of the input. How would I do this? The format is tricky for me when I look at it.
Thanks.
I guess you use field_error_proc badly, because it's good to wrap the input field into element with special class. Field_error_proc tags both the label and input tag with field_with_error by default since the refered object (:name that means category.name having the errors array) is the same. It's not a defect, because it's good for changing your label's color to red in this case. I checked the Rails code (actionpack/lib/action_view/helpers/tags/label.rb) and you can't turn this behavior off for labels (it can be a feature request), so I guess there's only one solution for your problem if you use plain html for labels.
I have two solutions now for your problem:
Instead of
<%= f.label :name, "Category Name *" %>
use
<label for="category_name">Category Name *</label>
in your view.
It's not too nice, but you can use f.label if you make form .label .validation-error { display: none } in your stylesheet file. I know it's just a workaround, but if f.label is necessary, then I don't know better solution.
You have two of these <span> tags in the page:
<span class="validation-error"> can't be blank</span>
EDIT:
Okay, it looks like both the label and the input need to be wrapped with a custom error. Here are a couple of links:
http://stackoverflow.com/questions/5267998/rails-3-field-with-errors-wrapper-changes-the-page-appearance-how-to-avoid-t
https://gist.github.com/1464315