如何阻止远程表单提交？

Posted 2023-03-03

【中文标题】如何阻止远程表单提交？

【英文标题】：How do I stop a remote form from submitting?

【发布时间】：2013-08-31 16:10:27

【问题描述】：

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

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

我希望表单仅在body textarea 有内容时提交：

  $(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

我正在使用带有 Turbolinks 的 Rails 4。

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

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

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

【参考方案1】：

您可能会为ajax:beforeSend 事件实现一个处理程序，以防止您的表单被提交。如果您的事件处理程序返回 false，看起来提交会停止。

维基：https://github.com/rails/jquery-ujs/wiki/ajax

示例实现：Stop $.ajax on beforeSend

【参考方案2】：

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

所以这对我来说非常适合：

$(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;
    
);

我希望它对其他人有用。

【讨论】：

有效。但是首先导致表单提交两次的原因是什么？

我不知道您的具体情况，但在这种情况下，问题是如果发生特殊情况，如何防止发送表单。我有一个类似的情况表单被*提交了两次*，这是因为在link_to 中我使用了remote: true，同时我使用@ 之一触发了ajax 请求987654328@我的链接正在使用。

【参考方案3】：

也许我没有得到你的问题，但添加一个是否足够

:required => true

给你的text_area ?

【讨论】：

required: true 添加了一个 HTML5 属性，该属性在一半的浏览器上不起作用。它不可靠。至少现在不是。

【参考方案4】：

这看起来像是 jquery_ujs 问题。尝试将事件更改为：

 $('.comment-form').on 'submit', (e) ->

我也面临同样的问题，只有这样才能解决问题。