I want to be able to create different sign up pages for each event in my web app.
I'm using Devise, Cancan and Rolify.
Below is my signup form at the moment:
.container
%h2
Sign up
.tab-content
.tab-pane.active{:id => "signup"}
= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'form-signin'}) do |f|
= f.error_notification
= f.input :email, :required => true, :autofocus => true, input_html: { class: "form-control"}, :placeholder => "Email"
- if f.object.password_required?
= f.input :password, :required => true, input_html: { class: "form-control"}, :placeholder => "Password"
= f.input :password_confirmation, :required => true, input_html: { class: "form-control"}, :placeholder => "Password Confirm"
= f.input :first_name, :required => true, :autofocus => true, input_html: { class: "form-control"}, :placeholder => "First name"
= f.input :last_name, :required => true, :autofocus => true, input_html: { class: "form-control"}, :placeholder => "Last name"
= f.button :submit, "Sign up", :class => "btn btn-lg btn-primary btn-block"
= render "devise/shared/links"
Is there a way we can add in fields from events table so those fields are populated with different urls so each one of them have dedicated signup page for visitors?
Related
I work on app which have bootstrap modal(for sign in/registration) where client side validation is performed. When you try to sign in with regular, but non existing email in db, server side validation is performed and you are redirected to users/signin page.
So, instead of that redirection, I need to make validations on client side and show error message in modal. Problem is, I work on real, big app for first time and I cant find place where those validations and redirections are performed. I can't find any relevant JS file or controller actions..
User model:
validates :password, presence: true, :on => :create
validates :password, confirmation: true, :on => :create
validates :email, presence: true
validates :username, uniqueness: true, presence: true
validates_format_of :username, :with => /^[a-z\d]*$/, :message => "Just letters and numbers please"
Modal for registration:
#modal-registration.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "registrationLabel", role: "dialog", tabindex: "-1"}
.modal-header
%button.close{"aria-hidden" => "true", "data-dismiss" => "modal", type: "button"} ×
%h3#myModalLabel Registration
.modal-body
.row-fluid
.span6
= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: { class: "form", id: "registration-form" }, :validate => true) do |f|
.control-group
.controls
= f.input :email, autofocus: true, label: false, placeholder: 'email'
.control-group
.controls
= f.input :username, autofocus: true, label: false, placeholder: 'Username'
.control-group
.controls
= f.input :password, label: false, placeholder: 'Password'
.control-group
.controls
= f.input :password_confirmation, label: false, placeholder: 'Password confirmation'
.control-group
.controls
= f.button :submit, "Registration"
.span6
= link_to "Registration via Facebook", "#", class: "btn btn-large btn-block"
= link_to "Registration via LinkedIn", "#", class: "btn btn-large btn-block"
.modal-footer
%button.btn{"aria-hidden" => "true", "data-dismiss" => "modal"} Close
Client_side_validation jQuery:
jQuery ->
$("#modal-registration, #modal-sign-in").on "shown", ->
$(ClientSideValidations.selectors.forms).validate()
Used gems: devise, client_side_validations, client_side_validations_simple_form, bootstrap, haml.
Did you try rails bootstrap forms gem?
You can do client side validations with rails bootstrap forms gem easily
You only need to add remote: true code, for example:
= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :remote => true) do |f|
= f.email_field :email
= f.text_field :username
= f.password_field :password
= f.password_field :password_confirmation
= f.submit
I have two forms, one containing a dropdown where the user can choose how a list is beeing sorted, the other one containing a searchfield, where the user can search through that list. Now if a user searches for "test" and ten results show up, I want the user to be able to choose from the dropdown, how the results are beeing sorted. Accordingly if he sorts the whole list, I want himto be able to search through the list, with the results showing up in the sorted way he choose before. Due to code restrictions I have to keep those two inputs in different forms.
Here is the sort-dropdown:
= simple_form_for path, :method => "get", html: {id: "sortform"} do |f|
= f.input :sort, :collection => [t(:'videos.date'), t(:'videos.title'), t(:'videos.length')], :label => false, :required => false, :selected => params[:sort], input_html: {class: "control", :id => "sort_dropdown", :name => :sort}, :include_blank => t(:'videos.sort')
And here is the search:
= simple_form_for path, :method => 'get', :label => t(:'videos.search'), html: {id: "search-form"} do |f|
= f.input :q, { input_html: { class: 'form-control searchbar', :name => :q, id: "search", :value => params[:q]}, :placeholder => t(:'videos.search'), :required => false, :label => false}
Is it possible to keep the two inputs seperate or would it be way easier to use just one form?
You can use separate forms if you need to, just store the other parameter in a hidden field in each of the forms.
= simple_form_for path, :method => "get", html: {id: "sortform"} do |f|
= f.input :sort, :collection => [t(:'videos.date'), t(:'videos.title'), t(:'videos.length')], :label => false, :required => false, :selected => params[:sort], input_html: {class: "control", :id => "sort_dropdown", :name => :sort}, :include_blank => t(:'videos.sort')
= f.input :q, as: :hidden, input_html: { :name => :q, :value => params[:q] }
= simple_form_for path, :method => 'get', :label => t(:'videos.search'), html: {id: "search-form"} do |f|
= f.input :q, { input_html: { class: 'form-control searchbar', :name => :q, id: "search", :value => params[:q]}, :placeholder => t(:'videos.search'), :required => false, :label => false}
= f.input :sort, as: :hidden, collection: [t(:'videos.date'), t(:'videos.title'), t(:'videos.length')], :selected => params[:sort], input_html: {class: "control", :id => "sort_dropdown", :name => :sort}, :include_blank => t(:'videos.sort')
I am using strong parameters and when I try to save the following form I get the following message.
undefined method `household_params' for # '<'VisitsController:0x007fa88deec428'>'
I am confused because I am using the visits controller and not the households controller - The visit is associated with a household as shown below and I call the view with the following code:
= link_to 'New Visit', {controller: 'visits', action: 'new',
household_id: household.id, method: 'post'}, class: 'btn btn-primary'
The Form is:
%h3 Household: #{household.name}
%h4 Household Members: #{household.neighbors.count}
%h4 Visits: #{household.visits.count}
= simple_form_for visit do |f|
= f.input :visited_on, :label => 'Visited On', as: :date_picker, input_html: { class: 'span2' }
= f.input :starch, :label => false, collection: ['Beans','Rice','Potatoes'],selected: 'Beans'
= f.input :cereal, :label => false, collection: ['Cereal','Grits','Oatmeal']
= f.input :option1, :label => false, collection: ['Peanut Butter Jelly', 'Deserts','Baby Fromula'], prompt: 'Options'
= f.input :items_received, :label => 'Special Needs',input_html: {rows: 4, class: 'span9' }
= f.input :notes, :label => 'Notes',input_html: {rows: 4, class: 'span9' }
= f.button :submit, :class => 'btn-primary', :label=> 'Save'
The form works fine without the three lines that display information about the household
I am thinking strong_parameters is getting confused
I have a form like so:
.row-fluid
= form_for(#client) do |f|
- if #client.errors.any?
#error_explanation
%h2
= pluralize(#client.errors.count, "error")
prohibited this client from being saved:
%ul
- #client.errors.full_messages.each do |msg|
%li= msg
.fieldset
%legend
= #header
.control-group
%label.control-label
Name
.controls
= f.text_field :name, :class => "input-xlarge"
.control-group
%label.control-label
Street Address
.controls
= f.text_field :street, :class => "input-xlarge"
.control-group
%label.control-label
Unit
.controls
= f.text_field :unit, :class => "input-small", :placeholder => "optional"
.control-group
%label.control-label
City
.controls
= f.text_field :city, :class => "input-xlarge"
.control-group
%label.control-label
State
.controls
= f.text_field :state, :class => "input-small"
.control-group
%label.control-label
Zip
.controls
= f.text_field :zip, :class => "input-small"
.form-actions
= f.submit "Save", :class => "btn btn-primary"
.btn
= link_to "Cancel", :root, :style => "color: #333; text-decoration: none;"
and I have a modal i'm loading up with the form inside like so:
.span2.offset2
%a.btn{"data-toggle" => "modal", :href => "#myModal", :role => "button"} New Client
/ Modal
#myModal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
.modal-header
%button.close{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
%h3#myModalLabel Modal header
.modal-body
%p
= render "form"
.modal-footer
%button.btn{"aria-hidden" => "true", "data-dismiss" => "modal"} Close
%button.btn.btn-primary Save changes
I'm wondering how to get the Save Changes button to submit the form. Do I need to add javascript to get it to work?
You need to make sure that the inputs and the buttons belong to one form element. This may be hard to achieve with your current markup.
Alternatively, you could submit the form with JavaScript, but the first method is much better, as you get a lot of functionality for free.
I am using simple_form 2.0 with twitter bootstrap.
I am trying to determine what is the proper wrapper format in order to get something like
[city] [State] [Zip]
I believe my form needs to be
<div class="control-group">
<%= f.input :city,:wrapper => :small, :placeholder => "City", :input_html => { :class=>"span2", :maxlength => 10},:label => false %>
<%= f.input :region, :wrapper => :small , :placeholder => "Region", :input_html => { :class=>"span1", :maxlength => 5}, :label => false %>
<%= f.input :postal_code, :wrapper => :small, :placeholder => "Postal Code",:input_html => { :class=>"span2", :maxlength => 10},:label => false %>
</div>
I tried this wrapper
config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs', :error_class => 'error' do |b|
b.use :placeholder
b.use :label_input
end
I believe I would need to define the CSS as well, but before I go down a rabbit hole I thought I would ask if this is built in somewhere.
It is possible to have simple_form do this. This places the inputs on one row with a single label:
<%= form.input :city, label: 'City/State/Zip', input_html: {class: 'span3'}, wrapper_html: {class: 'controls controls-row'} do %>
<%= form.input_field :city, class: 'span1' %>
<%= form.input_field :state, class: 'span1' %>
<%= form.input_field :zip, class: 'span1' %>
<% end %>
The 'span*' classes are optional.
Using Bootstrap you can add span wrappers.
config/initializers/simple_form_bootsptrap.rb
config.wrappers :span3, :tag => 'div', :class => 'span3', :error_class => 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label
b.wrapper :tag => 'div', :class => 'controls' do |ba|
ba.use :input
ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' }
end
end
app/assets/stylesheets/bootstrap_and_overrides.css.less
#red: #B94A48;
.control-group {
clear: both;
}
.error .controls .help-inline{
color: #red;
}
.error .control-label {
color: #red;
}
.error .controls select{
border: 1px solid #B94A48;
}
_form.html.rb
<%= f.input :city, :wrapper =>"span3" %>
<%= f.input :region, :wrapper =>"span3" %>
<%= f.input :postal_code, :wrapper =>"span3" %>
If you do not want the label change the label_input component only to input like this:
config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs' do |b|
b.use :placeholder
b.use :input
end
and you don't need to pass :label => false anymore.
The :error_class is not needed since you is not using the error component
An alternative method, and one that doesn't require bootstrap (which I'm assuming provides config.wrappers, since that throws an exception in my project where I'm not using TBS):
<div class="control-group">
<%= f.input :city, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "City", :input_html => { :maxlength => 10}, :label => false %>
<%= f.input :region, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "Region", :input_html => { :maxlength => 5}, :label => false %>
<%= f.input :postal_code, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "Postal Code", :input_html => { :maxlength => 10}, :label => false %>
</div>
Then in your css:
.inline_field_wrapper {
display: inline-block;
}
My solution for horizontal bootstrap forms:
.control-group
= f.label :password
.controls.controls-row
= f.input_field :password, :class => 'span2'
= f.input_field :password_confirmation, :class => 'span2'