[Rails] Display form error messages asynchronously

Even if you use form_with without local: true, the error message part is usually not asynchronous. I tried to display it asynchronously, so I will summarize the method.

Form View

If you do not add local: true to form_with, communication will occur asynchronously.

erb:app/views/tests/new.html.erb


<%= form_with model: @test do |f| %>      
  <%= f.text_field :name %>
  <%= render 'shared/err_msg' %>
  <%= f.submit %>
<% end %>

erb:app/views/shared/err_msg.html.erb


<div id='err_container' style='display: none'>
  <ul id='err_ul'>
    <!--I get an error message here-->
  </ul>
</div>

Controller When @ test.save fails, normally render: new is used to display the view file for the new action, but here it is described in ʻapp / views / shared / err_msg.js.erb`. I am trying to execute JavaScript.

app/controller/tests_controller.rb


def index
  @test = Test.new
end

def create
  @test = Test.new(test_params)
  respond_to do |format|
    if @test.save
      format.js { redirect_to tests_url, notice: 'created' }
    else
      @object  = @test
      format.js { render 'shared/error', status: :unprocessable_entity } #Status in the browser_Returns code 422
    end
  end
end

private
def test_params
  params.require(:test).permit(:name)
end

Js displaying error message

The style of the entire error message has been changed from display: none to display: block, and the error message is wrapped in li and displayed.

js:app/views/shared/err_msg.js.erb


let err_container = document.getElementById('err_container');
err_container.style.display = 'block';

let err_ul = document.getElementById('err_ul');
<% @object.errors.full_messages.each do |msg| %>
  err_ul.insertAdjacentHTML('afterbegin', '<li><%= msg %></li>');
<% end %>

Recommended Posts

[Rails] Display form error messages asynchronously
[Rails] How to display error messages individually
[Ruby on Rails] How to display error messages
[Ruby on Rails] Individual display of error messages
Display Flash messages in Rails
Japaneseization of Rails error messages [devise / Form objects, etc.]
[Rails] Japanese localization of error messages
Japanese localization of error messages (rails)
Animated display of Swift error messages
[Rails] How to display error messages for comment function (for beginners)
Testing for Error Messages: Rails Tutorial Notes-Chapter 7
How to display error messages in Japanese
The road to Japaneseizing Rails devise error messages
Rails error messages cannot be translated into Japanese
[Rails] How to get success and error messages
[Ruby on Rails] Add and delete tags and display (success / error) messages using ajax.
[Note] Rails error list
Xcode12 tableView display error
About Ruby error messages
Catch Rails Routing Error
[Rails] Display error message-Differences between render and redirect_to, flash-
[Rails error] unexpected tIDENTIFIER
Mac Rails Install Error
rails heroku error log
rails error resolution summary
[Note] Error message when using Rails Form object pattern Japanese
[Rails] Workaround for classes automatically generated by devise error messages
From Ruby on Rails error message display to Japanese localization
[Rails] Japanese localization of error message when using Form object
Japanese localization of error messages
rails error Library not loaded
Finally implemented Rails Form object
Error in rails db: migrate
JSP error display from Servlet
[Rails] Rails version upgrade error memorandum
Error when using rails capybara
[rails] error during devise installation