How can I add a property in the slim markup language? - slim-lang

I'd like to add a property to a tag generated by slim. For example:
<input type='text' name='name' required>

To create the HTML example you provided, your Slim would look like this:
= text_field_tag :name, required: 'required'
To add any additional attributes to the input tag, you'd simply provide additional arguments to the text_field_tag method. So if you wanted to specify the class attribute, you could do:
= text_field_tag :name, required: 'required', class: 'really-nice-text-field'
UPDATE:
This would also work:
= text_field_tag :name, required: true

Related

Abide Required tag in simple-form without "data-"

With Foundation 6 and Abide I want to have this tag in a simple-form form:
<input class="string optional" pattern="text" type="text" name="service[street_address]" id="service_street_address" required>
with a required attribute.
I tried this:
<%= service.input_field :street_address, data: {:required => ''}, pattern:"text" %>
but the the required tag becomes data-required and breaks Abide validation:
<input data-required="" class="string optional" pattern="text" type="text" name="service[street_address]" id="service_street_address">
Is there any way to have only required or required="" ?
If required: true doesn't work, try:
<%= service.text_field :postal_box, required: "required", pattern: "text" %>
"Required" becomes "data-required" because you've put it inside data: {}. What data: {} does is create data-* tags for you. So it's no surprise that the end input is "data-required". If you're looking for "required", then you're using the wrong method.
With a normal form_for tag, you can pass the attributes as options in the hash, like so:
<%= service.input_field :street_address, required: true, pattern:"text" %>
With simple_form, because simple_form creates a wrapper and a label automatically, you have to clarify that you're adding the attribute to the input, like so:
<%= service.input_field :street_address, input_html: { required: true }, pattern:"text" %>
I believe that, in your case, input_field is a form_for, and not a simple_form tag. So try the first method, and if it doesn't work, try the second.
(As a side note, you'll notice that the input it produces has this html:
<input required="required">
instead of:
<input required>
But these are exactly the same)

rails: text_field attributes in lowercase

I have the following text_field:
<%= f.text_field( :with_created_at_gte, class: 'form-control datepicker filterrific-periodically-observed', 'data-provide': 'datepicker', "data-date-clearBtn": true ) %>
Which outputs:
<input class="form-control datepicker filterrific-periodically-observed" data-provide="datepicker" data-date-clearbtn="true" type="text" value="05/08/2015" name="filterrific[with_created_at_gte]" id="filterrific_with_created_at_gte">
The problem at hand is: my attribute is data-date-clearBtn, but Rails renders data-date-clearbtn (lowercase b). How can I avoid this problem? I also tried:
<%= f.text_field( :with_created_at_gte, class: 'form-control datepicker filterrific-periodically-observed', data: { 'provide': 'datepicker', "date-clearBtn": true } ) %>
Consider that html tags and attributes are case insensitive, check the comments in this answer, so Rails is actually correct in this situation.
I don't think you can overwrite that behavior directly, you should either write your helper or type the html tag manually. The rails helper is designed in that way

Skip wrapper on associations with simple_form

I'm using simple_form, and I wonder if it's possible to skip any wrapper divs when dealing with an association select.
Thank's
If you're using something like f.association :product you can remove both the generated label and wrapper like so: f.association :product, label: false, wrapper: false
https://github.com/plataformatec/simple_form#stripping-away-all-wrapper-divs
SimpleForm also allows you to strip away all the div wrappers around
the field that is generated with the usual f.input. The
easiest way to achieve this is to use f.input_field.
Example:
simple_form_for #user do |f|
f.input_field :name
end
Produces:
<input class="string required" id="user_name" maxlength="100"
name="user[name]" size="100" type="text" value="Carlos" />
To view the actual RDocs for this, check them out here - http://rubydoc.info/github/plataformatec/simple_form/master/SimpleForm/FormBuilder:input_field
Or ...
Do something like
config.wrappers :small do |b|
b.use :placeholder
b.use :label_input
end
and use it in this way:
# Specifying to whole form
simple_form_for #user, wrapper: :small do |f|
f.input :name
end
https://github.com/plataformatec/simple_form#configuration
use collection_select instead, in haml:
= f.collection_select :position_id, Position.all, :id, :name, {}, { class: 'span3' }
this example assumes you have a position model and want to add span3 as a class on the <select> it generates

Generate custom attributes in check_box_tag

I'd like to generate check box with custom html attributes (to use UJS later). Here is my view code
<%= check_box_tag "data-toggle-completed" => "" %>
it gives me
<input id="__data-toggle-completed______" name="{"data-toggle-completed"=>""}" type="checkbox" value="1">
But I wanted
<input type="checkbox" data-toggle-completed="">
How can I achieve this?
You must give the custom attributes as fourth arguments, options. The first three arguments are name, value = "1", checked = false. See check_box_tag.
The code could be like this:
<%= check_box_tag :name, 1, false, data: { "toggle-completed" => "" } %>
I was using stimulus js so for custom data-action attribute I did the following
<%= check_box_tag :select_shipping_address, true , true, data:{action:"change->form#show_form"}%>

Invalid characters in label_tag

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

Resources