I built a form for a table with mostly boolean values. The form displays well, the bootstrap toggle works well, it saves data well, but it displays all the value as OFF when the edit page is called again.
I have tried playing with the options. Adding checked_value and unchecked_value, but it does not work.
<%= simple_form_for(#setting) do |f| %>
<div class="form-check_boxs">
<div class="row">
<div class="col-md-4">
<%= f.label :open_for_work do %>
<%= t :open_for_work %>
</div>
<div class="col-md-8">
<%= f.check_box :open_for_work, options: {}, checked_value: "true", unchecked_value: "false" %>
</div><% end %>
</div>
<div class="row">
<div class="col-md-4">
<%= f.label :turn_app_local do %>
<%= t :turn_app_local%>
</div>
<div class="col-md-8">
<%= f.check_box :turn_app_local, options: {}, checked_value: "true", unchecked_value: "false" %>
</div><% end %>
</div>
<div class="form-actions">
<%= f.button :submit, class: "btn btn-primary" %>
</div>
<% end %>
Does anyone knows how to actually use the gem 'bootstrap-switch-rails' in rails ?
NB: My site is all in Bootsrap 4, could be the reason why this does not work ?
The bootstrap issue should just affect styling and not the actual params passed through. Try:
<%= f.input :status, :as => :check_boxes, collection: [['true', 'false']] %>
Note that these will pass the strings 'true' and 'false' respectively when selected or not.
Simple_form
<%= simple_form_for(#book, wrapper: :horizontal_form, wrapper_mappings: {
}, html: { class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="image-upload">
<%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
</div>
<%= f.input :category_id, collection: #categories, prompt: 'Select a category' %>
<%= f.input :author %>
<%= f.input :description %>
<div class="d-flex">
<div class="ml-auto">
<%= f.button :submit %>
<%= f.button :cancel, to: books_path %>
</div>
</div>
<% end %>
This is my simple_form form. I want the f.input :book_cover to be displayed as the icon fa fa-cloud-download without the normal download button.
CSS.
.image-upload > input {
display: none;
}
Ive got another form working with it (this is just a snippet of a regular form_for resource:
<%= f.form_group :avatar, class: "row" do |f| %>
<%= f.label :avatar, class: "col-sm-4 col-form-label" %>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<% if #user.avatar.present? %> <%= #user.avatar_file_name %>
<% end %>
<%= f.file_field :avatar %>
<%= f.error_messages %>
</label>
</div>
<% end %>
Can't seem to get my simple_form working with just the icon.
Edit: Uploading a image to show what my problem is and what it should look like
picture
should look like this
SimpleForm has a input_field method that you can use instead input to render only the actual input element, without wrapper div and label. That helps if you want to build more complex structures manually.
<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<%= f.input_field :book_cover %>
<%= f.error_messages %>
</label>
</div>
This is my first attempt in creating forms in Bootstrap 4 using its native validation.
When I execute this code the default error messages appear since I have not set the novalidate value.
<%= form_tag contact_path, class: "needs-validation", method: 'get' do %>
<div class="row">
<div class="form-group col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<%= label_tag "#{t :label_name}" %><%= text_field_tag :name, params[:name], class: "form-control", :minlength => 2, :maxlength => 40, placeholder: "#{t :contact_placeholder_name}", required: "required" %>
<div class="invalid-feedback"><%= "#{t :label_name} #{t :contact_error_required}" %></div>
</div>
<div class="form-group col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<%= label_tag "#{t :label_email_address}" %><%= email_field_tag :email, params[:email], class: "form-control", :minlength => 15, :maxlength => 70, placeholder: "#{t :contact_placeholder_email}", required: "required" %>
<div class="invalid-feedback"><%= "#{t :label_email_address} #{t :contact_error_required}" %></div>
</div>
<%= submit_tag "#{t :contact_submit}" %>
</div>
<% end %>
I have the following with no success. The last one produced the same markup as the previous one.
<%= form_tag contact_path, class: "needs-validation novalidate", method: 'get' do %> - questioned if this would work since it's not identified as a class in the Bootstrap documentation.
<%= form_tag contact_path, class: "needs-validation", :novalidate, method: 'get' do %> *** error ***
<%= form_tag contact_path, class: "needs-validation", novalidate: "novalidate", method: 'get' do %>
<%= form_tag contact_path, class: "needs-validation", novalidate: true, method: 'get' do %>
How do I reproduce the following markup in Rails to get my custom error messages to appear? I have not seen anything about how to declare novalidate in Rails anywhere online.
<form class="needs-validation" novalidate>
After over two years I decided to try again. I forgot that I posted this question.
I'm using Bootstrap 4.5.0 with Rails 5.2.4.3.
I took the script from Tyler Fredrizzi's answer and added it to the head section in application.html.erb. I don't remember if the Bootstrap I was using in 2018 required an additional script or not.
Here is my form_tag statement.
<%= form_tag contact_path, novalidate: "novalidate", class: 'needs-validation', method: "get" do %>
The default popup messages still displayed when form errors occurred. I updated my submit button to remove them.
<%= submit_tag "#{t :contact_submit}", class: "btn btn-default", formnovalidate: true %>
It took a bit but I finally got it working.
I'm not sure if your question has been answered but I just ran into the same issue and was able to resolve it by using an html hash in my form_with tag.
<%= form_with model: #user, html: { class: "needs-validation", novalidate: true } do |f| %>
For some reason, I can't add a comment. On #nlfauria's answer, the key there is to use the form_with if you are using Rails >5.0.0.
I can confirm that the Bootstrap 4 validations work with the form_with tag and not with form_for, which was the default used by Devise. I utilized the same Javascript from the example given on the bootstrap page, which I linked here.
If you switch to the form_with, ensure that you use form.text_field and required: true in your fields to match the expected syntax of the new form_with.
To clarify, I am currently using Rails 6.0.0 and Bootstrap 4.3.1, so please be aware the expected behavior may be difference.
For Turbolinks 5.0.0 and >, in the javascript code that was posted in the Bootstrap Forms page, there a few things to do to make this work.
Move the Javascript to assets/javascripts and wherever you want to put it. (In the new Turbolinks issue page, there were suggestions of putting the JS in the header to avoid multi-loading issues)
Change the load event to turbolinks:load, as the JS action has changed for how documents are handled. See the code below.
This is in my app/assets/javascripts/application.js, as I will use these validations for all of my forms.
(function() {
'use strict';
window.addEventListener('turbolinks:load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
I'm no expert in JavaScript, so if someone has a better method, any advice would be much appreciated.
Here is the form I used with all of my code:
<%= form_with(model: resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, novalidate: true, class: 'needs-validation' }) do |f| %>
<div class='form-group'>
<div class="input-group">
<%= render 'shared/input_group_prepend_label', label: 'Name' %>
<%= f.text_field :name, autofocus: true, autocomplete: "name", class: 'form-control rounded' %>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="input-group form-group">
<%= render 'shared/input_group_prepend_label', label: 'Email' %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
<div class="valid-feedback">
Looks good!
</div>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div class='form-group'>
<div class="input-group">
<%= render 'shared/input_group_prepend_label', label: 'New Password' %>
<%= f.password_field :password, autocomplete: "new-password", class: 'form-control', placeholder: 'Leave blank if you dont want to change it' %>
</div>
<small id="passwordHelpBlock" class="form-text text-light">
Your password must be 6-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
<div class="input-group form-group">
<%= render 'shared/input_group_prepend_label', label: 'Confirm New Password' %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control', placeholder: 'Confirm you new password!' %>
</div>
<div class="input-group form-group">
<%= render 'shared/input_group_prepend_label', label: 'Current Password' %>
<%= f.password_field :current_password, autocomplete: "current-password", class: 'form-control', placeholder: 'Please input your current password to confirm changes.', required: true %>
<div class="invalid-feedback">
Please input your current password to confirm changes!
</div>
</div>
<%= render 'shared/form_submit_button_custom_label', form: f, custom_label: 'Update Information' %>
<% end %>
You'll want something like:
<%= form_tag contact_path, { class: "needs-validation novalidate", method: :get } do %>
The method signature expects two args, both potentially hashes, your current attempts are throwing all the arguments into the first hash.
form_with is the new hotness, however, so you might consider switching to it.
In BootStrap, I can use the following code to get a button with an icon.
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span> Click Me</button>
Now I want to do the same thing for the submit button of a Rails form. I don't know how to do it and below is my code:
<h1>Create a post</h1>
<%= form_for :post, url: posts_path do |f| %>
<div class="form-group">
<%= f.label :title %>
<%= f.text_field :title, class: "form-control" %>
<p class="help-block">Please type the title of the post</>
</div>
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, class: "form-control", rows: 5 %>
<p class="help-block">Please type the body of the post</>
</div>
<%= f.submit class: "btn btn-primary" %>
<% end %>
Could someone give me any suggestions?
I found the solution here: HTML code inside buttons with simple_form
<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
Text
<% end %>
i play around with Ruby on Rails in combination with Bootstrap.
What i have done is a form for contact.
My problem is when i create the form with ruby-syntax like:
<%= form_for #contact, html: {role: "form"} do |f| %>
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, :class => "form-control" %>
</div>
<div class="form-group">
<%= f.label :message %>
<%= f.text_field :message, :class => "form-control" %>
</div>
<%= f.submit "Send", class: "btn btn-primary" %>
<% end %>
then the submit-button gets very large (100% of the page).
In the custom Bootstrap they take the button-tag and not the submit-tag.
Is their any possibility to implement a button-tag in Ruby on Rails as a submit-button?
Thanks
Is their any possibility to implement a button-tag in Ruby on Rails as
a submit-button?
There is a button_tag for you.It just as like a HTML submit button.
<%= button_tag "Send", class: "btn btn-primary" %>
#=><button name="button" type="submit" class ="btn btn-primary">Send</button>
For more details, see this API
Ofcourse,you can do it like this too
<%= f.button "Send", class: "btn btn-primary" %>