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.
I added simple_form gem and its corresponding instructions, and i see the editor and all, but when I add the class to my form...it doesn't seem to be working. However, when I delete the class: 'summernote', the form functions correctly.
Here's what i have in my _form.html.erb. Note that the form works 100% fine as long as i don't assign it a class of summernote.
<%= simple_form_for ([#project, #task]) do |f| %>
<div class="form-group">
<%= f.input :description, input_html: { class: 'summernote' } %>
</div>
<h3>Extra Tasks?</h3>
<div id="tasks">
<%= f.fields_for :extratasks do |extratask| %>
<%= render 'extratask_fields', f: extratask %>
<% end %>
<div class="links">
<%= link_to_add_association 'add extratask', f, :extratasks %>
</div>
</div>
<%= f.submit %>
<% end %>
I've also tried doing <%= f.input :description, as: :summernote%> , but that only causes the original input field to overlap the summernote field.
Please, try this I think work:
f.input :description, html: { class: 'summernote' }
I am working on a Rails app, and I want to capture a piece of information and submit it when a user saves a form (that in real life makes a comment).
This seems perfectly suited for the hidden_field helper from what I have read. However, the "hidden info" I need to include is not something as simple as a text input somewhere on the page.
What I'm Asking: In my view, a blog post is rendered using a Markdown gem. Every header tag is given a unique ID in the DOM that you won't see below (i.e. <h1 id="toc_0">, <h3 id="toc_1">.
A user clicks on the header, and it opens a comment box to the right. When that comment box is saved, I want it to save this id as a string in an existing column called :location.
I have added a hidden_field line in my form; however, it is not capturing anything. Is it possible to capture the id of this clicked element so I can save it to my table?
The View
<div class="col-sm-8">
<% #posts.each do |post| %>
<h2 id="title"><%= post.title %></h2>
<p id="category"><%= post.category %></p>
<div id="paragraph"><%= markdown(post.content) %></div>
<% end %>
</div>
<!-- jQuery hides this and it toggles next to the clicked paragraph -->
<div class="exampleToggle">
<%= form_for :comments do |f| %>
<div class="form-group">
<div class="field">
<%= f.label :post %><br>
<%= f.text_area :post, class: "form-control" %>
</div>
</div>
<h5 id="username">Username</h5>
<div class="form-group">
<div class="field">
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
<%= f.hidden_field :location, :id => "hiddenPicker"%>
<div class="actions">
<%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>
<script>
$(document).ready(function(){
$('.exampleToggle').hide();
var whatever = document.getElementsByClassName("exampleToggle");
$("h3").click(function(){
$('.exampleToggle').show();
$(this).prepend(whatever);
$("form:not(.filter) :input:visible:enabled:first").focus();
});
});
</script>
You can use jQuery to get the ID of the H3 once it is clicked and pass it to the hidden field:
$(function () {
$('h3').on('click', function () {
var id = $(this).attr('id');
$('input#hiddenPicker').val(id);
});
});
I'm attempting to integrate the "Dante" WYSIWYG text editor into my Rails project. I have it installed and displaying on the screen. See screenshot: https://i.imgur.com/lLnEc7n.png
However, in my Rails app I have users that have_many stories. I'd like to use this editor to allow users to create these stories. I need to wire the editor and the form together basically, but I have no idea how to go about doing that, as I've never done something like this before. Would anyone mind giving me some tips please?
Documentation for editor is here: https://github.com/michelson/Dante
Current page:
<%= simple_form_for #story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>
<hr>
<div id="editor">
<h1 id="dante-editor">Click Me Once. Your Title Goes Here.</h1>
<h2>Tell us about your favorite backpacking adventure. This might also be a great place to add a picture.</h2>
<p>Simply replace and highlight any text here to add text. Press "Enter" to add more text or add images. Click on the image to add a caption. It's easy once you get the hang of it, just play around with it for a minute.</p>
</div>
<hr>
<script type="text/javascript">
editor = new Dante.Editor(
{
el: "#editor",
upload_url: "/images.json", //it expect an url string in response like /your/server/image.jpg or http://app.com/images/image.jpg
store_url: "/save" //post to save
}
);
editor.start()
</script>
<%= simple_form_for #story do |f| %>
<%= f.input :title %>
<%= f.input :subtitle %>
<%= f.input :content, :id => "editor" %>
<%= f.button :submit %>
<% end %>
Put the div inside of your form and make it hidden field
into like this
<%= simple_form_for #story do |f| %>
<%= f.hidden_field :title %>
<%= f.hidden_field :subtitle %>
<%= f.hidden_field :content, html: { id: "content"} %> // Use 'id' in your content field and match it in your editor div. Use data field data-field-id="content"
<div id="#editor" data-field-id="content">
<%= #story.cotent.try (:html_safe) %>
// #story is your instance variable and .content is db column from story
</div>
<%= f.button :submit %>
then use jquery to bind the editor content in content field which is
$(document).ready(function(){
$("#editor").bind("input properchange", function(){
$("#story_" + $(this).attr("data-field-id")).val($(this).html())
});
});
NOTE: It only save the text content not the image
there is a way to put an input dynamically from button?
Example:
this is the form:
<%= form_for(#order) do |f| %>
.
...
<div class="field">
<%= f.label :productlist %><br>
<%= f.select :productlist, #products, :prompt => 'Select one!' %>
<%= link_to 'Add More', '#', id: 'products-link' %>
</div>
<div id="newproduct">
<p>load here the new input on Add more link</p>
</div>
<div class="field">
<%= f.label :status %><br>
<%= f.text_field :status %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
so i thinked up to ajax and a way to load a partial input into the form, but im not understanding the correct way to do this.
Thank you
In your javascript file add:
$("a#products-link").click(function(){
$.get('/partials/products_form', function(data){
$("div#newproduct").append(data);
}, 'html');
});
Essentially what is happening is that you are going to send a get request via ajax to a form in /partials/products_form or wherever you choose to keep your form partial. And then this html will be appended to whatever div/identifier you choose in this case div#newproduct.