Is there a twitter boot strap class to display all validation error messages at the bottom of the form submit button?
<div class="row-fluid">
<div class="span12">
<div class="devise-body">
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),
:html => { :class=>'control-group error'} ) do |f| %>
<%= f.error_notification %>
<div class="controls">
<div class="row-fluid">
<div class="span6">
<%= f.input :first_name,:required=>true,:autofocus => true %>
</div>
<div class="span6"><%= f.input :last_name,:required=>true%>
</div>
</div>
<div class="row-fluid">
<div class="span6"><%= f.input :company %></div>
<div class="span6"><%= f.input :title %></div>
</div>
<div class="row-fluid">
<div class="span6"> <%= f.input :email, :required => true %></div>
<div class="span6"><%= f.input :phone_number %></div>
</div>
<%= f.input :password, :required => true %>
<%= f.input :password_confirmation, :required => true %>
</div>
<div class="form-actions" >
<!-- #class="form-actions" -->
<%= f.button :submit, "Sign up" ,:class => 'btn'%>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
If I were you I'd use their alert classes:
http://twitter.github.com/bootstrap/components.html#alerts
Related
I want to add several different images with a crud to make some "work pages" but i struggle with the way to do this. Do I have to update my model or how i can specify that each adding field is for a section of my view? I'm using cloudinary to host the images.
For now when I add an image its all the same but I wanted to add differents ones at each spot.
My work#new view :
<div class="container text center">
<%= simple_form_for(#work) do |f| %>
<div class="row justify-content-center">
<div class="col-md-6 col-sm-12">
<h1 class="heading-02" style="padding: 2rem 0rem;">New Work</h1>
<div class="work-new-section">
<h2 class="sub-heading-03">Header</h2>
<%= f.input :name %>
<%= f.input :description %>
<%= f.input :photo, as: :file %>
</div>
<div class="work-new-section">
<h2 class="sub-heading-03">Tasks</h2>
<%= f.input :task_title %>
<%= f.input :tasks %>
<%= f.input :photo, as: :file %>
</div>
<div class="work-new-section">
<h2 class="sub-heading-03">Content#1</h2>
<%= f.input :content1_title %>
<%= f.input :content1 %>
<%= f.input :photo, as: :file %>
</div>
<div class="work-new-section">
<h2 class="sub-heading-03">Focus</h2>
<%= f.input :focus_title %>
<%= f.input :focus %>
</div>
<div class="work-new-section">
<h2 class="sub-heading-03">Content#2</h2>
<%= f.input :content2_title %>
<%= f.input :content2 %>
<%= f.input :photo, as: :file %>
</div>
<%= f.submit 'Create a new Work', :class => 'button-accent mb-4' %>
</div>
</div>
<% end %>
</div>
Work#new
My Work model :
class Work < ApplicationRecord
has_one_attached :photo
end
For the work#show is use some partials with the same behaviour in it:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12">
<%= cl_image_tag #work.photo.key, :class=> "work-image", :width => 420, :height => 236, :crop => "fill" %>
</div>
<div class="col-md-4 col-sm-12">
<h2 class="sub-heading-03"><%= #work.content1_title %></h2>
<p class="ui-regular-01"><%= #work.content1 %></p>
</div>
</div>
</div>
Work#show
How could I specify one particular photo to each section? (task, content#1, content#2 etc...)
Thank you very much for your time!
I tried to change my new view but i have the impression that i omit something that i don't understand very well.
I know it's apparently a frequent question (saw many replies here), but I couldn't fix it yet.
So.. I'm building a simple blog app with devise gem, but when I try to log in, I always get the "Invalid Email or password." message :/
Actually, this is my first real project with rails, so sometimes I'm kinda lost with routes, and etc... By the way, I would say the error is probably being caused by the routes file.
Please, I'd appreciate some help :)
My routes.rb file:
Rails.application.routes.draw do
root 'posts#index'
resources :posts do
resources :comments
end
devise_for :users
devise_scope :user do
get "login", :to => "devise/sessions#new"
get "logout", :to => "devise/sessions#destroy"
end
My sessions/new.html.erb file:
<div class="container mt-3 pb-3">
<div class="row">
<div class="col-lg-6 border">
<h1>Login</h1>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= label_tag :email, "Email" %>
<%= text_field_tag :email, "", autofocus: true, :class =>"form-control" %>
</div>
<div class="form-group">
<%= label_tag :password, "Senha" %>
<%= password_field_tag :password, "", :class =>"form-control" %>
</div>
<div class="form-group">
<%= submit_tag "Entrar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
My registrations/_form.html.erb:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="form-group">
<%= f.label :username, "Nome" %>
<%= f.text_field :username, autofocus: true, autocomplete: "username", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :email, "Email" %>
<%= f.email_field :email, autocomplete: "email", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :password, "Senha" %>
<% if #minimum_password_length %>
<em>(No mÃnimo <%= #minimum_password_length %> caracteres)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation, "Confirme sua senha" %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.submit "Criar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
JUST ANOTHER THING! MAYBE IT'S IMPORTANT...
I have a navbar rendered in "layouts/application.html.erb" that shows the current user's name and a logout button when there's a user connected, and a login button when there are no sessions.
<% unless current_page? (login_path) %>
<%= link_to 'Entrar', login_path, :class =>"btn btn-outline-light" %>
<% end %>
Your error was caused by wrong sign_in form.
I have changed this part
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= label_tag :email, "Email" %>
<%= text_field_tag :email, "", autofocus: true, :class =>"form-control" %>
</div>
<div class="form-group">
<%= label_tag :password, "Senha" %>
<%= password_field_tag :password, "", :class =>"form-control" %>
</div>
<div class="form-group">
<%= submit_tag "Entrar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
To this one, and everything worked.
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.label :email, "Email" %>
<%= f.text_field :email, autofocus: true, :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.label :password, "Senha" %>
<%= f.password_field :password, :class =>"form-control" %>
</div>
<div class="form-group">
<%= f.submit "Entrar", :class =>"form-control btn btn-outline-dark" %>
</div>
<% end %>
I am using devise in my rails app, I converted the devise views to use simple form. When I attempt to sign up with an incorrect password format the flash messages for the password do not appear. Flash messages appear for ever other field. Does anyone know how to fix this problem.
<div class="container">
<div class="panel small-5 small-centered columns">
<div class="row">
<h2>Sign Up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),
:html => {:multipart => true}) do |f| %>
<%= f.input :email, label: "E-mail", :autofocus => true %>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.label :password, label: "Password" %>
<%= f.password_field :password %>
</div>
<div class="small-6 columns">
<%= f.label :password_confirmation %>
<div id="password-confirm">
<%= f.password_field :password_confirmation %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.input :last_name, label: "First Name" %>
</div>
<div class="small-6 columns">
<%= f.input :first_name, label: "Last Name" %>
</div>
</div>
</div>
<div class="row">
<div class="sign-up">
<%= f.label "Profile Photo" %><br>
<%= f.file_field :avatar, label: "Profile Photo" %>
<%= f.input :twitter_handle, label: "Twitter Url" %>
<%= f.input :linked_in_url, label: "Linked In Url" %>
<%= f.input :about_me, label: "About You (500 character max)" %>
<%= f.submit "Sign up", class: "button" %>
<% end %>
</div>
</div>
</div>
</div>
I've got this rails form partial:
<%= form_for #ptab, :remote => true, :html => { :class => 'form-horizontal' } do |f| %>
<div class="control-group">
<%= f.label :name, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :name, :class => 'text_field', :placeholder => 'Enter a name...' %>
</div>
</div>
<div class="control-group">
<%= f.label :address, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :address, :class => 'text_field', :placeholder => 'Paste a link...' %>
</div>
</div>
<div class="control-group">
<%= f.label :sequence, :class => 'control-label' %>
<div class="controls">
<%= f.number_field :sequence, :class => 'number_field', :placeholder => 'Enter an order number...' %>
</div>
</div>
<div class="control-group">
<%= f.label :gtab_id, :class => 'control-label' %>
<div class="controls">
<%= f.number_field :gtab_id, :class => 'number_field' %>
</div>
</div>
<div class="modal-footer">
<%= f.submit nil, :class => 'btn btn-primary' %>
<!-- <%= link_to t('.cancel', :default => t("helpers.links.cancel")), ptabs_path, :class => 'btn' %> --> <!-- this was the original cancel button -->
<a data-dismiss="modal" class="btn" href="#">Close</a>
</div>
<% end %>
I would like to turn the field in the last .control-group into a hidden field, but I still want it to be submitted to the controller.
What should I change this to :
<div class="control-group">
<%= f.label :gtab_id, :class => 'control-label' %>
<div class="controls">
<%= f.number_field :gtab_id, :class => 'number_field' %>
</div>
</div>
In order for it to not show in the rendered form but still be submitted with the form?
Use a hidden_field ? Or did I miss something ?
<%= f.hidden_field :gtab_id %>
And of course remove the divs around it as well as the label. hidden_field are submitted as regular fields, no worries
After reading the answer which suggested I use Simple_form gem with bootstrap integration, I installed it and created my form according to simple_form instructions, but the input boxes are floating right.
This is the layout. The form is being called with the partial 'shared/reg'
<div class="container">
<div class="row">
<div class="span8"><%= yield %></div>
<div class="span4">
<%= render 'shared/reg' %>
</div>
</div>
</div>
This is my simple form form
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
<%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %>
<%= f.input :email %>
<%= f.input :image, :as => :file %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.button :submit %>
<% end %>
Below you can see how the input boxes are floating right in relation to the submit button.
Update
Rather than using the .form-actions class, which wraps the submit button in gray block (which might not work for your page design), you can also wrap the button in a control group like this:
<div class="control-group">
<div class="controls">
<%= f.button :submit %>
</div>
</div>
This is only really needed if you're using the .form-horizontal class on the form itself.
If you're looking for a drop-in replacement form builder that outputs bootstrap-style markup for Rails, you might want to check out a gem that I put together to handle this sort of thing:
https://github.com/potenza/bootstrap_form
Here's how you'd setup a horizontal-style form with the submit button properly lined up:
<%= bootstrap_form_for(#user, html: { class: 'form-horizontal' }) do |f| %>
<%= f.text_field :email %>
<%= f.password_field :password %>
<%= f.password_field :password_confirmation, label: 'Confirm Password' %>
<%= f.control_group do %>
<%= f.primary "Save User" %>
<% end %>
<% end %>
This is the example output:
<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post">
<div class="control-group">
<label class="control-label" for="user_email">Email</label>
<div class="controls">
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_password_confirmation">Confirm Password</label>
<div class="controls">
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" name="commit" type="submit" value="Save User" />
</div>
</div>
</form>
You should try the following:
<%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
<legend>User Registration</legend>
<div class="control-group">
<%= f.label :name, class: "control-label" %>
<div class="controls">
<%= f.text_field :name %></p>
</div>
</div>
<div class="form-actions">
<%= f.submit %>
</div>
</fieldset>
Note that the bootstrap uses some specific selectors for some classes / html elements, so that if you forget to add an element or a class, everything else will be messed up... In this aspect there's no leeway.
On a side note, you should definitely try simple_form, and the bootstrap integration. It will make your life easier.
Update:
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
<legend>User Registration</legend>
<%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
<%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %>
<%= f.input :email %>
<%= f.input :image, :as => :file %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<div class="form-actions">
<%= f.submit %>
</div>
</fieldset>
<% end %>