I have the following form using action text and trix in Rails 6.1:
<%= form_for :job, url: job_create_path, method: :post do |f| %>
<%= f.label :description, class: "text-muted" do %>
Job Description <span class="lighter"> * required</span>
<% end %>
<%= f.rich_text_area :description, required: true, :placeholder=>"Job Description...", :class=>"form-control", :id=>"description" %>
<% end %>
I have a backend validation that works well. However, I would like to add a frontend validation as well. 'Required true' seems not to work on 'rich_text_area'. Does anybody know how to add a frontend validation as well?
https://github.com/basecamp/trix/issues/328#issuecomment-256788015
Browsers only support the required attribute for native input elements, unfortunately.
As the Trix editor is not a native HTML element it doesn't support required: true. You might have to use some custom JS to validate it.
Related
The added or changed data from a Trix editor field is not submitted/ transmitted.
<%= form_with(model: #comment, local: true) do |form| %>
<div class="form-group">
<h4>Titel</h4>
<%= form.text_field :header, class: "form-control border-top-0 border border-right-0 border-left-0 rounded-0 p-0" %>
<br/>
<h4>Inhalt</h4>
<%= form.trix_editor :comment %>
<%= form.text_field :tonie_id, value: tonie_id, hidden: true %>
<%= form.text_field :user_id, value: current_user.id, hidden: true %>
<%= form.check_box :private %> privater Kommentar
<br/>
<%= form.submit "speichern ",class: 'btn btn-success' %>
</div>
<% end %>
looking into my logs I get the following:
Parameters: {"authenticity_token"=>"xxxx", "tcomment"=>{"header"=>"title", "comment"=>"", "tonie_id"=>"49", "user_id"=>"1", "private"=>"0"}, "commit"=>"speichern "}
Any idea, what could be wrong?
This has been discussed here: https://github.com/rails/rails/issues/37399
You can fix by manually assigning ids to each of the rich text fields. Like this below:
form.rich_text_area :first_description, id: 'trix_first_description'
form.rich_text_area :second_description, id: 'trix_second_description'
form.rich_text_area :third_description, id: 'trix_third_description'
Hope this helps.
This may happen if there are multiple forms of the same model type on your page. I also encountered the same problem. I think it may be caused by duplicate ID.
When multiple rich text editors of the same model type appear on the same page, only the first one can be used normally. After other windows input content, they will be filled into the hidden tags of the first window, so when submitting , The data is null
Sorry i don't know how to express my thoughts in english, hope you understand my speech
I'm playing with ActiveStorage and trying to upload some files locally. Everything works great with the code below, but only if I remove multiple: true from the form. When it is on the form, I get an unpermitted param "files" error in the console. The unpermitted param comes from the way the form is submitting the hash.
Without multiple: true the hash lists attachments as an array (this is the working version):
"article"=>{"files"=>[#<ActionDispatch::Http::UploadedFile:0x007fb4e8e287f0
But with it turned on it it removes the array:
"article"=>{"files"=>#<ActionDispatch::Http::UploadedFile:0x007fb4eb07b7d0
What is causing this form behavior and how can I fix it?
I got the code sample from Engine Yard and here is the project code:
<h3>Attach files to this post</h3>
<%= form_with model: #article, local: true do |f| %>
<div class="form-row">
<%= f.label :file_upload, 'Attach a file' %>
<%= f.file_field :files, multiple: true %>
</div>
<%= f.submit %>
<% end %>
<h3>Attached files</h3>
<% #article.files.each do |file| %>
<%= link_to file.blob.filename, url_for(file) %>
<% end %>
When you use multiple: true you need to permit an array explicit in the article_params for :files:
For example:
params.require(:article).permit(:author, :text, files: [])
You can read more under Action Controller
Good luck!
I am trying to use Dropzone.js to upload files within my Rails app.
It seems that if I use the standard setup, the entire form becomes an image upload field. However, my form contains other fields as well. I only want to use Dropzone.js in a file_field area.
Steps I've used are:
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.erb
<%= form_for #activity, html: {class: 'ui form'} do |f| %>
<!-- Fields like this one don't need to be dropzone fields -->
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<!-- The following field does -->
<div class="field">
<%= f.label :gallery_images %>
<%= f.file_field :gallery_images, multiple: true, class: 'drop' %>
<%= f.hidden_field :gallery_images_cache %>
</div>
<% end %>
activities.coffee
$ ->
$('.drop').dropzone({ url: "/activities/post" });
As you can see, I'm trying to bind Dropzone to the 'drop' class which I've attached to the file_field. However, this doesn't seem to work correctly and I am seeing no errors in the console.
Anyone have an idea how I'd get Dropzone.js to work for a file_field within a Rails form? Or can I only bind it to the entire form?
Any help is much appreciated! Thanks!
You need to permit the :file param. Most probably there will be code something along the line of
private
def activities_params
params.permit(:name, ...other_params)
end
Add :file to the permit method
private
def activities_params
params.permit(...other_params, :file)
end
I have tested three ways of doing a field required, first with no gem, just the usual form_for and it did work well, but I need some good gem for making easier adding fields to insert associations, then I installed the Simple Form. Here is the code I am using:
<%= simple_form_for #post do |p| %>
<%= p.text_field :title, :required => true %> <br />
<%= p.input :content, required: true%> <br />
<%= p.input :category_id, input_html: { required: true }%>
<%= p.submit %>
<% end %>
See how I used all the three ways of getting required to true and the usual way of creating a text field of the form_for so I can see if I find a solution. No success. Even after making config.browser_validations = true in config/initializers/simple_form.rb. Why is it working for form_for but not when I am using gems? I also tried Formtastic and had the same issue.
If you place required: true in the input you should see the field has the "required" class and required="required" attribute.
I am starting use Ruby on Rails and I am having a little problem. I have a form with 3 fields, this is the code:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.text_field :name, autofocus: true, placeholder: "Name" %>
</div>
<div class="field">
<%= f.email_field :email, autofocus: true, placeholder: "Email" %>
</div>
<div class="field">
<%= f.number_field :age, autofocus: true, placeholder: "Age" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
In the email field when you write something that is not an email and try to submit, the browser (chrome or firefox ) display an error saying that the field must content an #. The same happen with the age field, if a letter is entered the browser show an error saying that the field only accept numbers.
I wanna know how to make that the browser show a message when any field is empty when you try to submit. I know how to do it in cakephp so I guess it can be done here in ruby too. I already validate the fields in the model, setting the presence in true but that only works for show a message after you submit and the page reload again.
When you use something like:
f.email_field
It is generating an HTML5 input element that tells the browser it has to be a valid email. HTML 5 also has a required='required' option that can be used to prevent blank fields.
You can add it like this:
<div class="field">
<%= f.email_field :email, autofocus: true, placeholder: "Email", :required => 'required' %>
</div>
This will add required='required' to your form element. Note that in HTML5 you only need the word required in your form element, but the only way I know to add it in Rails is to use the option form I'm showing you here.
This will prevent submitting the form without that field. This works for current versions of Firefox, Chrome, Opera, and IE11. Safari will prevent the submission but doesn't indicate why. It just does nothing.
I would check this out: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
You can set the HTML required attribute to true. Just add required: true to each field.
Here's what your new form will look like:
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.text_field :name, required: true, autofocus: true, placeholder: "Name" %>
</div>
<div class="field">
<%= f.email_field :email, required: true, autofocus: true, placeholder: "Email" %>
</div>
<div class="field">
<%= f.number_field :age, required: true, autofocus: true, placeholder: "Age" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
Your case is pretty custom, that's why it looks pretty easy, but what you're really trying to achieve here is called 'client-side validation'.
To be really portable and user-friendly it has to be done in JavaScript. Basically this will be a script that validates the fields and outputs the corresponding error messages to the user, preventing form submission at the same time. This is almost the same that Rails does on the server side when you submit the form.
Once the problem is defined, you can approach it in one of the following ways:
Stay with Rails. Rails is initially designed to handle form validation on the server side. You can just accept the way it is, and it will yield the cleanest, shortest and the most semantic code possible. For it to be more seamless you can easily pull in some AJAX for it, which should be easy (http://guides.rubyonrails.org/working_with_javascript_in_rails.html). To user it'll look like nothing ever got submitted.
Write some custom JS yourself to handle those validations. Either on your own, or with the aid of libraries like http://jqueryvalidation.org/. This is going to be a mess, since you'll basically have to duplicate Rails server-side validation code on the client-side in a different language. And keep it in sync.
Use one of the helper libraries for Rails. E.g. https://github.com/joecorcoran/judge looks promising, but there are others to be Googled. These guys exercise the same idea: you've got server-side validations and they should be easily usable on the client-side. Certain libraries generate JavaScript automatically, others just send the form to be validated to the server behind the scenes.
If I were you, I would choose the 1st way + AJAX. Other ways would make simple matters unnecessarily complex, and instead of writing useful stuff you'll most certainly have to dive into debugging obscure JS and cryptic meta-programmed Ruby/Rails libraries.
Hope that helps!
HTML 5 has required=true option that can be used to prevent form submission with empty fields. In rails form helpers, you can use it like
<%= f.text_field :first_name, required: true %>
<%= f.email_field :email, required: true %>