I've just started learning ruby on rails recently.
I've login form like this,
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="field">
<%= label_tag :email %><br />
<%= text_field_tag :email, params[:email], :class => 'form-control' %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="field">
<%= label_tag :password %><br />
<%= password_field_tag :password, :class =>'form-control' %>
</div>
</div>
</div>
</div>
I'm just trying to add bootstrap class form-control to email and password field but some thing went wrong, class value appeared at input field of password.
And I've got view like this,
The question might be stupid, any help suggestion is appreciated.
According to the documentation, the second parameter of password_field_tag method is value, so you should set it in order to set third parameter, where you can set the class:
<%= password_field_tag :password, nil, class: 'form-control' %>
Related
Good morning. I'm a newbie in Ruby and I'm stuck in a little problem.
In a form, I want to make a selection of categories. Categories can be inserted by the users, so the selection have to be dynamic.
I've tried like this:
<div class="input-field">
<select class="multiple">
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]} %>
</select>
</div>
It works, but on chrome console, look like this:
<div class="input-field">
<select class="multiple"></select>
<option value="2">Pastasciutta</option>
<option value="3">Vegetariano</option>
</div>
The category ID was correctly used as value and the list is correctly shown. But, as you see, the "option" is out of the "select" tag. Can you explain me why? And how can I solve this issue?
That list is only shown as a list, but I want to flag and unflag x categories.
My version of Ruby -> 2.3.1
----EDIT----
_form.html.erb
<%= form_for(recipe) do |f| %>
<% if recipe.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(recipe.errors.count, "error") %> prohibited this recipe from being saved:</h2>
<ul>
<% recipe.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :time %>
<%= f.number_field :time %>
</div>
<div class="field">
<%= f.label :price %>
<%= f.text_field :price %>
</div>
<div class="field">
<%= f.label :recipe %>
<%= f.text_area :recipe %>
</div>
<div class="input-field">
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]}, {}, class: "multiple" %>
</div>
<br>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
And that's what is rendered:
http://prnt.sc/cfqmp6
The line:
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]} %>
Is already rendering the <select> tag part of the element, you are duplicating this element by placing the above line inside another <select>. Change this:
<select class="multiple">
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]} %>
</select>
To this:
<%= f.select :category, Category.all.collect {|x| [x.name, x.id]}, {}, class: "multiple" %>
The last two arguments are the options and html_options to the select tag. See: http://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-select
I'm building a form in ROR and I'd like to use a bootstrap validation state on the text_field but I'm unsure of how to implement the feature? I'm not great with bootstrap so I thought I see if I could get help on here. I'll show my form and my code for clarity.
FORM
<label>
Name<br>
<div class="form-group has-error has-feedback">
<%= f.text_field :name %>
</div>
</label>
Here I have already placed the div class around the text_field but how does bootstrap know when a validation is wrong and turn the text field red? Im trying to implement this
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
this is in the bootstrap docs but I'm not sure how to make it work in my app
I want the text field to look like this when name is blank.
I hope this is enough info?
Put your errors in your app/views/layouts/application.html.erb, above the yield and under your nav.
<% if flash[:notice] %>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:notice] %>
</div>
<% elsif flash[:error] %>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:error] %>
</div>
<% elsif flash[:alert] %>
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= flash[:alert] %>
</div>
<% end %>
within your model, validate the form
validates :title, length: { minimum: 5 }, presence: true
within app/helpers/application_helper.rb
def form_group_tag(errors, &block)
if errors.any?
content_tag :div, capture(&block), class: 'form-group has-error'
else
content_tag :div, capture(&block), class: 'form-group'
end
end
within your form
<% if post.errors.any? %>
<div class="alert alert-danger">
<h4>There are <%= pluralize(post.errors.count, "error") %>.</h4>
<ul>
<% post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= form_group_tag(post.errors[:title]) do %>
<%= f.label :title %>
<%= f.text_field :title, class: 'form-control', placeholder: "Enter post title" %>
<% end %>
<%= form_group_tag(post.errors[:body]) do %>
<%= f.label :body %>
<%= f.text_area :body, rows: 8, class: 'form-control', placeholder: "Enter post body" %>
<% end %>
<div class="form-group">
<%= f.submit "Save", class: 'btn btn-success' %>
</div>
<% end %>
make sure you have the proper logic in your controller too
if #book.save
format.html { redirect_to #book, notice: 'Book was successfully created.' }
format.json { render :show, status: :created, location: #book }
else
format.html { render :new }
format.json { render json: #book.errors, status: :unprocessable_entity }
end
This example here might be helpful: http://formvalidation.io/examples/adding-warning-validation-state/
In Rails the easyest way to do it is using te gem bootstrap_form
after install it you can use it like this
<%= bootstrap_form_for(#user) do |f| %>
<%= f.text_field :name %>
<%= f.submit "Log In" %>
<% end %>
hope this helps
I have a form with several fields (many of which are datepicker fields) and only three of them show these weird artifacts
Here are the same fields in Chrome, but it appears the same on every other browser... including Safari on Windows (on a different computer, not a VM or parallels)
Here is the relevant code:
<legend>Delivery Information</legend>
<div class="form-group">
<%= f.label :start_date,
"Start Date <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :start_date, class: "form-control datepicker",
required: false,
value: (model.start_date.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
<div class="form-group">
<%= f.label :end_date,
"End Date <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :end_date, class: "form-control datepicker",
required: false,
value: (model.end_date.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
<div class="form-group">
<%= f.label :last_day_of_classes,
"Last Day of Classes <span class='red-text'>*</span>".html_safe,
class: "col-sm-4 control-label" %>
<div class="col-sm-5">
<%= f.text_field :last_day_of_classes, class: "form-control datepicker",
required: false,
value: (model.last_day_of_classes.strftime("%m/%d/%Y") rescue "") %>
</div>
</div>
model is just because this is a shared form.
I have no idea why these fields are displaying this way... any ideas?
So. By changing the class name from datepicker to pickerDates on those three fields the carets have disappeared. I don't know why or how.
I'm using Devise for user registration. It automatically gives me the form for a new session:
<%= form_for(resource_name, resource, :url => session_path(resource_name)) do |f| %>
.
.
.
<% end %>
I have the email and password label and fields like so:
<div class = "field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class = "field">
<%= f.label :password %><br />
<%= f.password_field :password %>
</div>
But I'd like to add a class the the text_field and password_field so that I can style the boxes to make them look better.
<%= f.text_field :email, :class => "whatever" %>
did not work, so I looked in the Rails API and found a text_field method and did this:
<%= text_field(:user, :email, :class => "whatever" ) %>
which leaves out the "f" called in "form_for...do |f|". Even so, I'm pretty sure it worked because when I "View Source", the output ("id" and "name") matches:
<div class = "field">
<label for="user_email">Email</label><br />
<input id="user_email" name="user[email]" size="30" type="text" value="" />
</div>
<div class = "field">
<label for="user_email">Email</label><br />
<input class="whatever" id="user_email" name="user[email]" size="30" type="text" value="" />
</div>
This all seems great that it works and the source looks like it's fine, but I just want to get some confirmation from some more experienced developers to make sure that this definitely works and that there is nothing behind the scenes that is wrong before I make the change and have problems later.
Something else is wrong in your code.
<%= f.text_field :email, :class => "whatever" %>
Does what you want: you don't need to specify the user model, because the form builder (the f) knows which model it's dealing with.
For more info, read the introduction paragraph here: http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-text_field
I want to get focus to the text field on mouseover. How to do this? Now my code lookd like this
<div class='label_input'>
<%= f.label :username %>
<%= f.text_field :username %>
<div class='clearfix'></div>
</div>
Expecting similar to the HTML code
<input type="text" onmouseover="this.focus()"></input>
You could pass an onmouseover to text_field (docs).
Sometimes I just skip the erb and write the html
You can try:
<div class='label_input'>
<%= f.label :username %>
<input id="user_name" name="user[name]" size="30" type="text" onmouseover="this.focus()"></input>
<div class='clearfix'></div>
</div>
I find that in some cases the rails view helpers get more cumbersome than html. So, use what's most easy.
This way is really helpfull when you update select boxes with javascript.
<div class='label_input'>
<%= f.label :username %>
<%= f.text_field :username, onmouseover: "this.focus()" %>
<div class='clearfix'></div>
</div>