I have this form:
<%= form_for(#building_shared_space, data: {abide:''}) do |f| %>
...
<div class="field">
<%= f.label :room_type, 'Room Type' %>
<%= f.text_field :room_type, placeholder: 'Room Type', required: '' %>
<%= content_tag(:small, 'Please enter a room type', class: 'error') %>
</div>
<div class="field">
<%= f.label :description %>
<%= f.text_field :description %>
</div>
<div class="field">
<%= f.label :default -%>
<%= f.check_box :default %>
</div>
...
When I submit, it correctly highlights and displays a warning next to Room Type. However, it also makes the other form labels red. Why is this happening?
I'm using Foundation and Rails 4.
In order to make the <small class="error"> ... </small> work, it must be a sibling of the input. While it may look like putting the element after the input, which would be a sibling, would work, the code is affecting -all- siblings. (Which makes sense in 20/20 hind-sight.)
The wording of the documentation, can be interpreted (especially with little sleep) that the wrapping <div> is just for the sake of the example. However, having a parent element for the input control and the error message is mandatory. <DIV> just works incredibly well.
The Custom Named Patterns code example actually doesn't show a wrapping element. It also, to be fair, doesn't show an error message element. But this can mislead one to think the wrapping <div> is superfluous and just for the sake of explaining what's going on, rather than being a necessary component of making the right tree structure in the DOM to isolate validation behaviors.
Related
I am currently working on a registration form. Users should only register with an email-adress belonging to a specific domain (e.g. "#example.com"). I want to add this domain as a text behind the email-input-field to make it clear for the users what to enter. Unfortunately it seems impossible to write something behind an input-field as rails automatically does a line break.
This is the relevant part of the form:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email, autofocus: true %>[#example.com]
</div>
<div class="actions">
<%= f.submit "register", class: "button" %>
</div>
<% end %>
The result should look like [ ] #example.com
Also I need the email-adress to be an actual email-adress. Therefore I also need to manipulate the input e.g. "john" to "john#example.com" before saving the user to the database.
How can I achieve these two things?
The strict answer to your question is that in your controller action you are free to manipulate or set attributes on an instance before you save it.
def create
#foo = Foo.new(foo_params)
#foo.email = mangle_email(#foo.email)
if #foo.save
... # normal stuff
end
end
In your particular case, you should consider the various input scenarios (e.g., user adds the #domain on their own, etc.), since there are lots of cases where just appending something to the end of the user input is probably not what you're after.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm newbie of Ruby on rails.
As I know, this Ruby tag <%= %> used when you call or print a function. only.
But when I use form_for, the IDE ask me to add <% end %>
<%= form_for(#article, :html => {class: 'form-horizontal', role: 'form'}) do |f| %>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :title %>
</div>
<div class="col-sm-8">
<%= f.text_field :title, class: 'form-control', placeholder: 'Title of article', autofocus: true %>
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :description %>
</div>
<div class="col-sm-8">
<%= f.text_area :description, rows: 10, class: 'form-control', placeholder: 'Body of article', autofocus: true %>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<%= f.submit class: 'btn btn-primary btn-lg' %>
</div>
</div>
<% end %>
What I expect is:
<% form_fo %>
...
<% end %>
What I expect is:
<% form_for %>
...
<% end %>
Your expectation is somewhat understandable, but wrong.
Each form_for needs a matching end.
And if you don't use <%= on form_for, then it won't be printed. Will still be generated and all, but you won't see it.
You could try another markup language, like HAML, for example. It doesn't require you to close most anything (because it relies on indentation to derive info about code structure)
= form_for ... do |f|
= f.label ...
As mentioned by Sergio, HAML is an alternative to the regular .erb style and so is SLIM.
SLIM would allow you to write that piece of code as:
= form_for(#article, :html => {class: 'form-horizontal', role: 'form'}) do |f|
.form-group
.control-label.col-sm-2
= f.label :title
.col-sm-8
= f.text_field :title, class: 'form-control', placeholder: 'Title of article', autofocus: true
.form-group
.control-label.col-sm-2
= f.label :description
.col-sm-8
= f.text_area :description, rows: 10, class: 'form-control', placeholder: 'Body of article', autofocus: true
.form-group
.col-sm-offset-2.col-sm-10
= f.submit class: 'btn btn-primary btn-lg'
You can omit completely the div by writing .something (which will render <div class="something"> and equals div.something) or #something (the same but with an id). And you can mention html tags simply like h2#main-header (which renders <h2 id="main-header">)
If you wanted to use a conditional you would:
- if something
h1= "#{current_user.name} is here"
- else
p Oops
If you want to execute a block without printing the block return itself, but just things inside the block:
- ['chachacha','chuchuchu'].each_with_index do |thing, i|
p= i == 0 ? 'Chachacha is not chuchuchu' : 'Chuchuchu is not chachacha'
This would render:
<p>Chachacha is not chuchuchu</p>
<p>Chuchuchu is not chachacha</p>
It has a whole bunch of stuff and I found it to really slim down the view code and make it much more perceptible. IT also has the added benefit that you can simply copy the markup and use it straight away inside jquery as selectors, or a least see them in similar ways.
Either way I found both HAML and SLIM better suited than plain .erb once you understand the .erb templating system.
Only the opening tag has the = to show whether it should be printed or not.
The end statement does not need to be printed.
Hope that helps!
I've been playing around with Rails for about a year now, and I'm working on my first app that is actually going into production. Since this is a more utilitarian app and it doesn't have to be very flashy, I opted to use the Bootstrap CSS libraries to speed up the UI design.
I'm using the rails-bootstrap-forms gem and I have some text fields in different divs for layout's sake. I'd like to modify the tabindex for the fields so the first_name and last_name fields are next to each other in the tab order. Is there a way to pass the form generator this option?
Here's a snippet of the form HTML:
<div class="row">
<div class="col-sm-5">
<%= f.text_field :first_name, label_col: "col-xs-6", control_col: "col-xs-6" %>
<%= f.text_field :teacher, label_col: "col-xs-6", control_col: "col-xs-6" %>
</div>
<div class="col-sm-5">
<%= f.text_field :last_name, label_col: "col-xs-6", control_col: "col-xs-6" %>
<%= f.text_field :room, label_col: "col-xs-6", control_col: "col-xs-6" %>
</div>
</div>
Just add the key tabindex to the form helper tag.For example,
<%=f.text_field 'first_name',:tabindex=>1%>
In Michael Hartl's tutorial, it is written
<%= f.label :name %>
<%= f.text_field :name %>
it becomes
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" type="text" />
and
<%= f.label :email %>
<%= f.email_field :email %>
becomes
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" type="email" />
Was looking it for so long but I really could not understand how the code can translate to html. Can anyone explain?
These are all enclosed in the following code
<%= form_for(#user) do |f| %>
.
.
.
<% end %>
The label, <%= f.label :email %> is really just a method-call: You call form.label(:email). The <%= is short for <% print.
These methods are form-helpers, and included in the form object from FormHelper.
If you look at the code in the label method you'll see it instantiates a Tags::Label object.
Looking deeper at that Tags::Label it does a lot, but the most important part is the call to label_tag. Which renders a label tag.
The contents of the label tag is changed from :email to Email by using the humanize helper. (We ignore all the localisation and translation for now). You can use these helpers everywhere yourself. Open a console with rails console:
:email.to_s.humanize #=> "Email"
:postal_code.to_s.humanize #=> "Postal code"
In rails most of these stacks are hard to follow, because it is both abstracted into models (to allow re-use) and a lot of edge-cases such as localisation or XSS security mix in a lot of additional "cruft" that makes the path the code follows harder to understand.
But, in short, <%= f.label(:email) %> could roughly be translated to print label_tag(:email.to_s.humanize, id: :email).
I want to create a form that does not have a label, and instead puts the directions inside the actual input text field. I also want the directions to disappear when you click the text field.
Here is an example
http://www.dailyblogtips.com/wp-content/uploads/searchform.png
I know in html, you do something like this
<input type="text" name="s" id="s" value="Text to be displayed here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
But how can I accomplish this using rails form helpers.
Here is what I have so far
<div class="row">
<div class="small-12 columns">
<div class="panel">
<%= form_for(#message) do |f| %>
<%= f.label :body, "Description" %>
<%= f.text_area :body %>
<%= f.submit 'Create message', class: 'button small secondary' %>
<% end %>
</div>
</div>
</div>
I'd give the placeholder attribute a try, it'll only work with newer browsers but there are a few jQuery libraries that will automatically detect the ones that don't support it and perform more or less the same thing that your javscript snippet is doing. Here is an example of using the placeholder field:
<%= f.text_field :field_name, :placeholder => "Disappearing Text" %>
Edit: Here is a solid jQuery fallback plugin:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
In html, the pre-text in an input is called the placeholder attribute.
You can add that attribute into form_for looped fields like so:
<%= f.text_field :some_data, :placeholder => "value" %>
BUT, when doing the placeholder attribute, beware that its not completely supported across older versions of some browsers. So often some JS is required to polyfil this functionality...you should care about supporting this if you don't use traditional labels next to your input fields.