Unable to prevent form when a condition is met

Question

I am working on a form I wish to validate via jQuery $.ajax. The form should only be submitted if a certain condition, data == 1

var preventSubmit = function() {
  return false;
  var form = $(this),
    name = form.find('#name').val(),
    email = form.find('#email').val(),
    comment = form.find('#comment').val();

  $.ajax({
    type: "POST",
    url: absolute_store_link + '/ajax/comments-filter',
    data: {
      name: name,
      email: email,
      comment: comment
    },
    success: function(data) {
      // if data is equal to 1,
      // submit form
      if (data == 1) {
        return true;
      }
    }
  });

};

$("#comment_form").on('submit', preventSubmit);

The submit happens regardless if the condition is met or not.

Where is my mistake?

If I use e.preventDefault();, how can I "undo" it in case if data is equal to 1?

[Synchronous AJAX request](https://stackoverflow.com/questions/6685249/jquery-performing-synchronous-ajax-requests). — user202729, Nov 07 '18 at 14:50
i guess you know that the code after the `return` statement will never be executed? — messerbill, Nov 07 '18 at 14:52
@messerbill I want the default to be *do not submit*, bit if `(data == 1)` submit it. — Razvan Zamfir, Nov 07 '18 at 14:57
but `return false` in the very first line of your function will always be the last line executed inside that function - code lines after a `return` statement are so called `unreachable code` because functions do not execute code behind the `return` keyword — messerbill, Nov 07 '18 at 14:59

dgeare · Accepted Answer · 2018-11-07T15:24:11.397

You won't be able to allow the submission of the form with a return value of true because the ajax is happening asynchronously (by the time it completes the function has already finished executing). What you can do is always prevent the form from submitting in the preventSubmit function, then submit it programmatically.

var preventSubmit = function() {
  
  var form = $(this),
    name = form.find('#name').val(),
    email = form.find('#email').val(),
    comment = form.find('#comment').val();

  $.ajax({
    type: "POST",
    url: absolute_store_link + '/ajax/comments-filter',
    data: {
      name: name,
      email: email,
      comment: comment
    },
    success: function(data) {
      // if data is equal to 1,
      // submit form
      if (data == 1) {
        form.off();//remove bound events (this function)
        form.submit();//manually submit the form
      }
    }
  });
  return false;//the return needs to be at the end of the function and will always prevent submission
};

$("#comment_form").on('submit', preventSubmit);

@RazvanZamfir you included the `return false` at the end? That should definitely prevent form submission until the ajax resolves... — dgeare, Nov 07 '18 at 15:26

score 0 · Answer 2 · answered Nov 07 '18 at 15:04

Anything after the return false; will never be executed.

Also, you should be doing form validation on the front-end rather than the back-end. With that being said, you should not remove the validation from the back-end.

One more thing, try doing HTML5 form validation first as that's your first line of defence.

You're looking at something on the lines of:

var validateForm = function(e) {
  // prevent the default form action to allow this code to run
  e.preventDefault();

  var isValid = false,
    form = $(this),
    name = form.find('#name').val(),
    email = form.find('#email').val(),
    comment = form.find('#comment').val();

  // Validation goes here
  // ...
  // isValid = true;

  if (isValid) {
    $.ajax({
      type: "POST",
      url: absolute_store_link + '/ajax/comments-filter',
      data: {
        name: name,
        email: email,
        comment: comment
      },
      success: function(data) {
        // do something with the response. Maybe show a message?
        form.submit();
      }
    });
  }
};

Unable to prevent form when a condition is met

2 Answers2