Wie kann ich das Senden eines Remoteformulars stoppen?

Question

Ich habe ein Formular, das sowohl entfernt als auch normal verwendet werden kann.

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

Ich möchte das Formular nur einreichen, wenn der body TextArea- Inhalt hat:

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

Dieser Code funktioniert, wenn die Form nicht Ajax ist. Aber wenn es entfernt ist, schlägt es fehl und die Form wird noch übermittelt. Warum? Ich habe auch versucht:

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

Ich verwende Rails 4 mit Turbolinks.

Update: Ich habe versucht, das ajax:beforeSend Ereignisbindung, es legt nach wie vor:

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

ich keine Benachrichtigung sehen ...

Answer 1

Vielleicht habe ich Ihre Frage nicht, aber es sollte nicht sein genug, um ein

:required => true 

zu Ihrem text_area hinzufügen?

Answer 2

Sie könnten möglicherweise einen Handler für das Ereignis ajax:beforeSend implementieren, um zu verhindern, dass Ihr Formular übermittelt wird. Es sieht so aus, als ob die Übermittlung stoppt, wenn Ihr Ereignishandler false zurückgibt.

Wiki: https://github.com/rails/jquery-ujs/wiki/ajax

Beispielimplementierung: Stop $.ajax on beforeSend

Answer 3

Das sieht wie ein jquery_ujs Problem. Versuchen Sie, die Veranstaltung zu ändern zu:

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

ich das gleiche Problem gegenüber und nur dies das Problem gelöst.

Answer 4

Ich verwende Rails 5.0.0.1 und wie in aufhaltbare Ereignissen an jquery-ujs Dokumentation beschrieben Abschnitt benötigen Sie nur einen false Wert im ajax:beforeSend Ereignisse zurückzukehren, um die Anfrage zu stoppen und die Form verhindern senden zu sein.

So funktioniert das perfekt für mich:

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

Ich hoffe, es für jemand anderen nützlich sein könnte.