满足条件时无法阻止表单答案

【问题标题】：Unable to prevent form when a condition is met满足条件时无法阻止表单
【发布时间】：2018-11-07 14:48:27
【问题描述】：

我正在处理我希望通过 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，我该如何“撤消”它？

【问题讨论】：

Synchronous AJAX request.
@user202729 JavaScript 或 jQuery
我猜你知道return语句后面的代码永远不会被执行？
@messerbill 我希望默认为不提交，如果(data == 1) 提交则位。
但是函数的第一行中的return false 将始终是该函数内部执行的最后一行-return 语句之后的代码行被称为unreachable code，因为函数不执行return 关键字后面的代码

标签： javascript jquery ajax preventdefault

【解决方案1】：

您将无法允许提交返回值为 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);

【讨论】：

@RazvanZamfir 你在最后包含了return false 吗？这肯定会阻止表单提交，直到 ajax 解决......

【解决方案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();
      }
    });
  }
};

【讨论】：