RailsでAjaxを使った非同期通信とバリデーションについてです。

Question

RailsでAjaxを使った非同期通信とバリデーションについてです。

非同期通信を取り入れている投稿フォームに最低50文字となるようにバリデーションをかけ、
５０文字以内で送信ボタンを押すとバリデーションがかかりエラーメッセージが表示されます。

しかし、エラーメッセージが出た後５０文字以上入力しても送信ボタンはもう動作しません。
バリデーションに引っかかった後も送信できるようにするにはどうしたら良いのでしょうか。

よろしくお願いします。

コード
postsモデル

validates :content, presence: true, length: { minimum: 50 }

posts.js

$(function() {
  function buildHTML(post){
    var html = `<div class="post" data-id=${post.id}>
                  <div class="upper-post"
                    <div class="upper-post__date">
                      ${post.created_at}
                    </div>
                    <div class="lower-post__content">
                      ${post.content}           
                    </div>
                  </div>
                </div>`
    return html
  }

  $('#new-post').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(post){
      var html = buildHTML(post);
      $('.form__submit').attr('disabled', false);
      $('.posts').prepend(html);
      $('#new-post')[0].reset();
    })
    .fail(function(){
      alert('投稿に失敗しました');
    })
  })
});

index.html.erb(投稿フォーム)

<%= form_for [@group, @post],id: :new__post, html: {id:'new-post'}  do |f| %>
  <div class="form">
    <div class="form-body">
      <div class="post-form">
       </div>
       <textarea class="textbox", name="post[content]", id="input-text"></textarea>
       <div class="form__mask">
         <div>
           <input type="submit" name="commit" value="投稿" data-disable-with="投稿" class="form__submit">
         </div>
      </div>  
  </div>
<% end %>

Comments

[maisumakun]

どのようなコードを書きましたか？

[taroo]

回答ありがとうございます。

マークダウンが使えなかったので質問に追記しました。
よろしくお願いします。

[yambejp]

#new-postにあたるformはどうなっていますか？

[taroo]

質問に追記しました。
よろしくお願いします。

Answer 1

apiによるバリデーションで送信ボタンを非活性にしているのでしょうか？
非活性にしなければいいだけの話ではないのですか？

Comments

[taroo]

回答ありがとうございます。
特段、追記しておりません。

[yambejp]

> 送信ボタンはもう動作しません

とは押せない状態なのか、押せるけどサブミットされないのか、どちらでしょう？
そもそもソース自体submitイベントは殺してあるので
送信もajaxで処理すればいいような気がします。
逆にサーバーサイドのバリデーションが通ったときはサブミットしたいなら
$.ajaxのdoneの中でformをtrigger('submit')してやればいいでしょう。

ただしサーバーサイドでバリデーションしてクライアントサイドに処理を戻すのは
無駄しかないのであまり賛成できません
そうするなら最初からjsでバリデーション処理をかけばいい気がします。
（サブミットされたときにはどちらにしてもサニタイズする必要があります）

[taroo]

jsでバリデーション、、見落としてました＞＜
ありがとうございます！