满足条件时无法阻止表格

Question

我正在处理我希望通过 jQuery $.ajax 验证的表格。只有在满足特定条件时才应提交表格，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);

无论是否满足条件都会提交。

我的错误在哪里？

如果我使用 e.preventDefault();，如果数据等于 1，我如何 "undo" 它？

Answer 1

您将无法允许提交 return 值为 true 的表单，因为 ajax 是异步发生的（当它完成时，函数已经完成执行).您可以做的是始终阻止表单在 preventSubmit 函数中提交，然后以编程方式提交。

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

Answer 2

return false; 之后的任何内容都不会被执行。

此外，您应该在前端而不是后端进行表单验证。话虽如此，您不应该从后端删除验证。

还有一件事，请先尝试 HTML5 form validation，因为这是您的第一道防线。

您正在查看以下内容：

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

javascript

ajax

jquery

preventdefault