【Ruby on rails】JavaScript 비동기 통신의 코멘트 기능으로 에러 메세지를 내는 밸리데이션

처음에

비동기 통신으로의 코멘트 기능은 실장 미미로, 「401자 이상의 코멘트」는 NG라고 하는 밸리데이션은,
걸고 있었지만, 에러 메세지가 나오게 하고 있지 않았습니다···.
조금 구현에 고생은 했지만, 비동기 통신에 대한 이해가 깊어지므로 정리해 갑니다! !

밸리데이션을 걸어 둔다

app/models/post_comment.rb

class PostComment < ApplicationRecord
  default_scope -> { order(created_at: :desc) }
  # あるコメントに紐づくユーザーも記事も１
  belongs_to :user
  belongs_to :post

  validates :comment, presence: true, length: { maximum: 400 }
end

일단 마이그레이션 파일도.

db/migrate/20210801122808_create_post_comments.rb

class CreatePostComments < ActiveRecord::Migration[5.2]
  def change
    create_table :post_comments do |t|
      t.text :comment, null: false
      t.integer :user_id,null: false
      t.integer :post_id,null: false

      t.timestamps
    end
  end
end

app/views/post_comments/_comment.html.erb

 <%= form_with(model:[post, post_comment], remote: true) do |f| %>
      <%= f.text_area :comment, rows:'2',placeholder: "感想や疑問点をコメントで伝えましょう",required: true,class:"form-control" %>
      <%=f.submit "コメントする",class:"mt-2 btn btn-outline-secondary btn-block btn-sm"%>

우선, 여기까지 하면 공란에서의 투고에 대해서는 이하와 같이 나옵니다.
다만, 401문자 치고도 밸리데이션에는 걸리는 것의 아무것도 나오지 않는다고 하는 상황입니다.

컨트롤러로 저장할 수 없었던 경우의 기술을 쓴다!

controllers/post_comments_controller.rb

  def create
    post = Post.find(params[:post_id])
    @comment = current_user.post_comments.new(post_comment_params)
    @comment.post_id = post.id
    @post = Post.find(params[:post_id])
    if @comment.save
      # ユーザーステータス無効で、投稿者とコメント者が等しいとき
      if current_user != @post.user && @post.user.is_valid == true
        @post.create_notification_by(current_user)
      end
      @post_comment = PostComment.new
    else
      render 'error'
    end
  end

통지 기능도 실장하고 있으므로 이해하기 어려워지고 있을지도 모릅니다 ····죄송합니다.
댓글이 유효성 검사에 걸려 저장되지 않으면,render 'error' 라는 점이 포인트입니다! ! !

그런데 render 먼저 갑니다.

error.js.erb

views/post_comments/error.js.erb

$("#comments-error").html("<%= j(render 'layouts/errors', obj: @comment) %>");

코멘트가 401자로 밸리데이션에 걸려 있기 때문에, @comment 의 가지고 있는 값으로서는
"false"입니다.

그리고 여기의 설명으로서는, id가 comments-error 가 되어 있는 어딘가에,<%= j(render 'layouts/errors', obj: @comment) %> 를 건네준다
입니다.
덧붙여서 'layouts/errors'의 내용은 이런 느낌이 되고 있습니다.

<% if obj.errors.any?%>
<div class="text-center" style="color:red;">
<%=obj.errors.count %>件のエラーが発生しました。<br>
<% obj.errors.full_messages.each do |message| %>
    <%= message %>
  <% end %>
</div>
<% end %>

이제 이 오류 문장을 꽂는 id = comments-error 의 개소를 만들어 봅시다.

오류 메시지 발행

app/views/post_comments/_comment.html.erb

#ここです！！！！
<div id ="comments-error"></div>
      <%= form_with(model:[post, post_comment], remote: true) do |f| %>
      <%= f.text_area :comment, rows:'2',placeholder: "感想や疑問点をコメントで伝えましょう",required: true,class:"form-control" %>
      <%=f.submit "コメントする",class:"mt-2 btn btn-outline-secondary btn-block btn-sm"%>
      <% end %>

<div id ="comments-error"></div> 라는 부분을 작성했습니다.

이제 코멘트 필드 바로 위에 오류 메시지가 표시됩니다.

요약: 비동기 통신 오류 메시지 흐름

コメントがバリデーションに引っ掛かり保存されない
↓
errorのjsファイルに飛ぶ
↓
jsファイルは指定されてるidに、html以下を差し込む
↓
該当のidが記載されてる箇所で、html以下を受け取り表示する。
要するに、普段は
<div id ="comments-error"></div>なってるところが、
<div id ="comments-error">render 'layouts/errors', obj: @comment</div>
になってくれて、エラー文が出てくると！

원래 비동기 통신이란 ..

마지막으로 쓰는 것은 괜찮습니다만, 간단하게 정리해 갑니다.
간단하게 말하면 「데이터를 송신하면, 이제 화면을 재기록해 준다」라고 하는 것입니다.
서버의 결과는 기다리지 않습니다.
보통이라면 제대로 응답 기다리지만 비동기 통신은 기다리지 않습니다!
장점으로는 기다릴 필요가 없기 때문에 빠르다는 것입니다.
서버가 처리하는 동안 작업을 수행할 수 있습니다.
"나중에 겨우 ~"라는 느낌입니까?

마지막으로

비동기 통신이 잘되지 않을 때는 철자 오류와 같은 느낌이 들기 때문에,
철자 실수에주의하십시오! ! ! ! ! !