How do I stop a remote form from submitting?

Question

I have a form that can be used both remotely and normally.

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

I want the form to submit only if the body textarea has content:

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

That code works when the form is not Ajax. But when it's remote, it fails and the form still submits. Why? I also tried:

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

I'm using Rails 4 with Turbolinks.

Update: I tried binding the ajax:beforeSend event, it still submits:

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

I see no alert...

alexventuraio · Accepted Answer · 2017-03-13 20:45:49Z

5

I'm using Rails 5.0.0.1 and as described at jquery-ujs documentation in Stoppable events section you only need to return a false value in the ajax:beforeSend event to stop the request and prevent the form from being send.

So this works perfectly for me:

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

I hope it could be useful for somebody else.

answered Mar 13, 2017 at 20:45

alexventuraio

10.5k2 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

W.M. Over a year ago

Works. But what is the thing that is causing the form to be submitted twice in the first place?

alexventuraio Over a year ago

I don't know which is your case exactly but in this case the question was how to prevent the form from being sent if something special happens. I had a similar case the form was being *submitted twice* and it was because in a link_to I used remote: true and at the same time I had and ajax request triggered with one of the classes my link was using.

Dennis Hackethal Over a year ago

If the form is already in the DOM upon page load, $("form#messages_form").on("ajax:beforeSend", function ...) will suffice.

Community · Accepted Answer · 2017-05-23 11:46:39Z

4

You could potentially implement a handler for the ajax:beforeSend event to prevent your form from being submitted. It looks like the submit stops if your event handler returns false.

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

Example implementation: Stop $.ajax on beforeSend

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Aug 28, 2013 at 22:31

lmjohns3

7,6325 gold badges39 silver badges57 bronze badges

Comments

Miotsu · Accepted Answer · 2013-08-28 16:55:13Z

0

Maybe I didn't get your question, but shouldn't it be enough to add a

:required => true

to your text_area ?

answered Aug 28, 2013 at 16:55

Miotsu

1,77618 silver badges30 bronze badges

1 Comment

user2630970 Over a year ago

required: true adds an HTML5 attribute that doesn't work on half the browsers. It's not dependable. At least not at this time.

Hugo Dias · Accepted Answer · 2016-06-15 21:42:27Z

0

This looks like a jquery_ujs issue. Try changing the event to:

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

I'm facing the same issue and only this solved the problem.

answered Jun 15, 2016 at 21:42

Hugo Dias

1693 silver badges14 bronze badges

Collectives™ on Stack Overflow

How do I stop a remote form from submitting?

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related