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，该如何“撤消”？

Answer 1

由于ajax是异步发生的（到它完成功能时该函数已经完成执行），因此您将不允许提交返回值为true的表单。您所能做的就是始终阻止表单在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();
      }
    });
  }
};

满足条件时无法阻止表格

2 个答案: