jquery - 如何阻止远程表单提交？

Question

我有一个可以远程和正常使用的表单。

= form_for @comment, html: { class: 'comment-form' }, remote: request.xhr? do |f|
  = f.text_area :body
  = f.submit

我希望仅当 body 文本区域有内容时才提交表单:

  $(document).on 'submit', '.comment-form', (e) ->
    text = $(this).find('#comment_body').val()
    false if text.length < 1

当表单不是 Ajax 时，该代码可以工作。但是当它是远程时，它会失败并且表单仍然会提交。为什么？我也尝试过:

if text.length < 1
  e.preventDefault()
  false

我正在使用 Rails 4 和 Turbolinks。

更新:我尝试绑定(bind) ajax:beforeSend 事件，它仍然提交:

  $(document).on 'page:load', '.comment-form', ->
    $(this).bind 'ajax:beforeSend', ->
      alert "hi"

我没有看到任何警报...

Answer 1

我正在使用 Rails 5.0.0.1 并如 jquery-ujs 中所述在 Stoppable events 部分的文档中，您只需在 ajax:beforeSend 事件中返回 false 值即可停止请求并阻止发送表单。

所以这对我来说非常有效:

$(document).on("ajax:beforeSend", "form#messages_form", function (e, data, status, xhr) {
    var len = $.trim($('#message_body').val()).length;

    if (len > 3) {
        console.log("Send form!");
        return true;
    } else {
        console.log("Stopping request...");
        return false;
    }
});

我希望它对其他人有用。