I'm using simple_form with Bootstrap and I would like to have my "Remember me" check box be inline to the left of the label, as in the Twitter Bootstrap docs: http://twitter.github.com/bootstrap/base-css.html#forms
My form code looks like this:
<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :class => 'well'}) do |f| %>
<%= f.input :email %>
<%= f.input :password %>
<%= f.input :remember_me, :as => :boolean if devise_mapping.rememberable? %>
<%= f.button :submit, "Sign In" %>
<% end %>
The result is the the "Remember me" label on top of a check box.
What have I messed up?
There's a number of options for this, see here for more of them:
The most straightforward (I think) is to use :label => false and :inline_label => true, on your checkbox, to change the where in the HTML the label is placed.
<%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => true if devise_mapping.rememberable? %>
This produces something like this for me:
#alol's answer works great for a vertical form (labels on top of the fields), but if you're doing a horizontal form and you want the check box labels to show to the right of the checkbox, but still keep with the layout of the form, you can do this:
f.input :remember_me, :as => :boolean, :label => " ", :inline_label => true if devise_mapping.rememberable?
You can also pass a specific label to use as the inline label instead of true, if you need to:
f.input :remember_me, :as => :boolean, :label => " ", :inline_label => "My Label" if devise_mapping.rememberable?
I think this one is a bit simpler:
f.input :remember_me, wrapper: :vertical_boolean, as: :boolean if devise_mapping.rememberable?
The wrapper comes bundled in config/initializers/simple_form_bootstrap.rb at least from simple_form 3.1.0rc2 when installed with:
rails g simple_form:install --bootstrap
Related
I am currently using the ClientSideValidations gem and stuck while rendering a partial using ajax and trying to validate addresses inside that rendered partial with the gem mentioned above. Nothing happens when entering a wrong combination specified in the model.
If browsing to the address-form directly and trying out validations, everything works fine, just like specified.
Any hints or thoughts on how to make the validations gonna work inside the partial?
Thanks!
EDIT: No errors in JS console, just nothing happens when for example entering a too short zipcode (specified in the model with 5 digits). Btw I use haml for the views.
So the code in my view:
= link_to "Shipping", addresses_path, :remote => true
corresponding controller addresses_controller.rb
respond_to do |format|
...
format.js {render :layout => false}
...
end
corresponding index.js.erb
$("#ajax_content").html("<%= escape_javascript(render :partial =>
"partialXY") %>");
and corresponding partial
= form_for #address, :validate => true, :id => "address_form", :remote => true do |f|
- if #address.errors.any?
#error_explanation
%h2
= pluralize(#address.errors.count, "error")
prohibited this user from being saved:
%ul
- #address.errors.full_messages.each do |msg|
%li
=msg
%ul
%li
= f.label :type
= f.select :address_type, [['Billing Address', 'billing'],['Shipping Address',
'shipping']], :class => "address_selection"
%li
= f.label :gender
= f.select :gender, [['Male', 'male'],['Female', 'female']], :class => "text_field"
%li
= f.label :last_name
= f.text_field :last_name, :id => "last_name", :class => "text_field"
%li
= f.label :first_name
= f.text_field :first_name, :class => "text_field"
%li
= f.label :company_name
= f.text_field :company_name, :class => "text_field"
%li
= f.label :street
= f.text_field :street, :class => "text_field"
%li
= f.label :number
= f.text_field :number, :class => "text_field"
%li
= f.label :zipcode
= f.text_field :zipcode, :class => "text_field"
%li
= f.label :place
= f.text_field :place, :class => "text_field"
%li
= f.label :phone_no
= f.text_field :phone_no, :class => "text_field"
%li
= f.label :country
= f.text_field :country, :class => "text_field"
%li
= f.label :email
= f.text_field :email, :class => "text_field"
%li
= f.submit
so like I said nothing happens when validating the rendered partial inputs like zipcode, etc. The funny thing is, that if you look at the following, automatically by rails generated view for editing addresses, the validation works just fine.
rails generated view to edit address
=render 'partialXY'
I have been working on this issue for a long time and have absolutely no clue on how to fix this. I'm sure it has something to do with ajax since using validation when rendering the rails generated partial works just fine.
Thanks a lot! Phil
Ok I fixed it. Turned out despite giving the form an ID, the ID was a different one in the final html code. So I just added a
$('form.form_real_id').validate();
to my .js.erb file!
Extract of my Gemfile:
gem 'rails', '3.0.3'
gem 'inherited_resources', '1.2.1'
gem 'simple_form', '1.4.0'
For any resource, I have 1 view for the 3 actions (new, edit & show). Example:
<h1><%= I18n.t('admin.form.'+action_name.downcase, :name => controller_friendly_name) %></h1>
<%= simple_form_for([:admin, resource]) do |f| %>
<%= render "admin/shared/errors" %>
<%= f.input :title,
:label => "Title",
:hint => I18n.t('admin.form.input.title.hint', :name => controller_friendly_name),
:required => true,
:error => false,
:input_html => { :class => :large, :placeholder => I18n.t('admin.form.input.title.placeholder', :name => controller_friendly_name) }
%>
<%= f.input :is_visible,
:as => :radio,
:label => "Visible",
:error => false,
:required => true,
:collection => [['Yes', true], ['No', false]],
:wrapper_class => 'checkboxes-and-radiobuttons',
:checked => true
%>
<%= render "admin/shared/validation", :f => f %>
<% end %>
<% init_javascript "MyApplication.Form.disable();" if [:show].include?(action_name.to_sym) %>
See how the #show action set all the fields to disabled ? This is ugly.
Consider I can't refactor the views to have a show.html.erb file.
What I want to do:
When the action is #show, the simple_form builder use a custom builder wich replace <input>, <textarea>, <select> by <p> html tag, with the value.
Furthermore, I will customise the radiobuttons, checkboxes to.
My first step:
# app/inputs/showvalue_input.rb
class ShowvalueInput < SimpleForm::Inputs::Base
def input
# how to change 'text_field' by <p> container ?
#builder.text_field(attribute_name, input_html_options)
end
end
Can't find the way to do it. Custom Form Builders or Custom Inputs (with monkey patching) ?
Thank for the help !
Here's my solution
in my application_helper.rb:
def set_show_method_to_builder(builder)
builder.instance_eval <<-EVAL
def show?
#{action_name == "show"}
end
EVAL
end
In my forms (in the simple_form block):
<%- set_show_method_to_builder(f) -%>
And finally, in #app/inputs/string_input.rb:
class StringInput < SimpleForm::Inputs::StringInput
def input
if #builder.show?
content_tag(:p, #builder.object[attribute_name], :class => :show)
else
super
end
end
end
There's some problem with data types not mapped, but it's another story:
Can't create Custom inputs for some (Text, Booleans, ...) types, with SimpleForm
I installed the gem client_side_validations, did everything exactly according to the manual, for greater certainty, I checked it on a test project, it worked, but when i migrate it to my project it gave this error:
undefined method `validate_options' for #<User:0xb67365fc>
this is the form code:
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :validations => true, :html => {:id => 'commentform'}) do |f| %>
<%= f.input :name, :label => t('general.name') %>
<%= f.input :last_name, :label => t('general.last_name') %>
<%= f.input :email, :label => t('general.email') %>
<%= f.input :phone, :label => t('general.phone') %>
<% if #user.password_required? %>
<%= f.input :password, :label => t('general.password') %>
<%= f.input :password_confirmation, :label => t('general.password_confirm') %>
<%= f.hidden_field :is_anonym, :value => false %>
<% end %>
<br/>
<%= f.button :submit, :label => t('general.button') %>
<% end %>
anyone help me..
For what its worth I've rewritten the ClientSideValidation gem completely. The previous version I wrote at the DNC had some pretty big issues.
Feel free to check out the 3.0 rewrite: https://github.com/bcardarella/client_side_validations
So this is what my devise/sessions/new.html.erb looks like:
<div id="sign_in">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<%= f.text_field :f_name, :value => "First Name", :class => "clearField curved" %><div class="error"></div><br />
<%= f.text_field :l_name, :value => "Last Name", :class => "clearField curved" %><div class="error"></div><br />
<%= f.text_field :username, :value => "Username", :class => "clearField curved" %><div class="error"></div><br />
<%= f.password_field :password, :value => "Password", :class => "clearField curved" %><div class="error"></div><br />
<%= f.password_field :password_confirmation, :value => "Password", :class => "clearField curved" %><div class="error"></div><br />
<%= f.text_field :email, :value => "Email Address", :class => "clearField curved" %><div class="error"></div><br />
<div id="login_buttons">
<%= f.submit "Sign in", :id => "login", :value => "Submit", :class => "curved" %>
<%= f.submit "Sign in", :id => "register", :value => "Register", :class => "curved" %>
<%= f.submit "Send Reset Instructions", :id => "pass-reset", :value => "Send Reset Instructions", :class => "curved"%>
Forgot pass?
</div>
<% end %>
</div>
The above only works for the login (because the :url => session_path(resource_name) and not registration_path).
What this page does now, is on pageload it hides every field except the username & password field (i.e. it defaults to the login page). Then when they press the 'Register' button, it fades in the others.
However, when you press submit that doesn't work - because the wrong form handler is managing it.
This is what my regular registration form looks like (which works, btw) at devise\registrations\new.html.erb:
<h2>Sign up</h2>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<p><%= f.label :username %><br />
<%= f.text_field :username %></p>
<p><%= f.label :email %><br />
<%= f.text_field :email %></p>
<p><%= f.label :password %><br />
<%= f.password_field :password %></p>
<p><%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation %></p>
<p><%= f.submit "Sign up" %></p>
<% end %>
<%= render :partial => "devise/shared/links" %>
The applicable part of my routes file looks like this:
devise_for :users, :path_names => { :sign_up => "register",
:sign_in => "login",
:sign_out => "logout" }
devise_scope :user do
get "login", :to => "devise/sessions#new"
get "register", :to => "devise/registrations#new"
get "logout", :to => "devise/sessions#destroy"
So the behavior I want is as follows:
The user goes to login, they see only two form fields (username + password). They press enter it logs them in.
If they press 'Register', without doing a pageload, I would like the right form (with the additional form fields required: first name, last name, etc.) to appear and when they press enter it does the registration. I would also like the URL to change from myapp.com/login to myapp.com/register - without a page load. If they pressed 'Sign In' without filling out the form, it should take them back to the login page (myapp.com/login) with only the two fields (username + pass) showing.
That way when I link directly to myapp.com/register it goes directly to that one page with the correct form fields and it functions properly.
Basically functionality similar to the way github now manages browsing through a repo with no page refreshes (but the URL changes).
Suggestions?
To combine user registration with user login on the same page, I did the following:
1) Copy all the code from views/sessions/new INTO view/registrations/new
2) Modify the submit button id/js namespace:
<%= f.submit 'submit_button', :style => "display: none", :id => "submitSignInForm" %><br>
<a class="button" href="javascript:document.getElementById('submitSignInForm').click();"> Sign in </a>"
3) Override the Devise Session Controller new method with a redirect.
create controllers/sessions_controller.rb and insert the following code. Note the controller class inherits from Registrations, not Sessions!
class SessionsController < Devise::RegistrationsController
def new
redirect_to new_user_registration_path
end
end
*I should note, this worked in rails 2.3.5, but I think it will work in 3.0 the same.
How do I include the 'autofocus' attribute on an HTML5 form using the text_field form helper in Rails?
e.g. <%= f.text_field :email %>
Where does autofocus go?
Thanks
f.text_field :email, autofocus: true
This will work:
text_field_tag :reseller, '', autofocus: true
Note the empty value argument.
<%= f.text_field :email, nil, :autofocus => true %>
will work.
similarly, if you want to use other HTML5 attributes and CSS classes, you can write :
<%= f.text_field :email, nil, :autofocus => true, :placeholder => "Your email Here", :class => "active", :style => "color: #333;" %>