如何在提交或阻止提交之前验证表单（不显眼）时使用 jquery .defer 或 .done

Question

在其他示例中，我尝试使用 defer 和 promise（第一次），但它不起作用。

我在表单上使用了非侵入式验证。有一个提交，然后我在获取错误计数的地方捕获该提交事件。但是，我需要有一种方法来等待错误计数功能完成，然后从那里调用一个函数来收集我的数据并 POST 它（使用 AJAX），或者不调用。

$(document).on('click', '.Save', function() {
  $("#personEditForm").submit();
});

$(document).on("submit", "form", function(e) {
  e.preventDefault();

  // check for ModelState.Errors with unobtrusive validation
  var promise = ValidateEditForm();
  promise.done(function() {
    alert("promiseDone");
  });

  ValidateEditForm();
  return false;
});

function ValidateEditForm() {
  var $errors = $('#personEditForm').find(".field-validation-error span");
  var errorCnt = 0;

  $errors.each(function() {
    errorCnt++;
  });
  if (errorCnt <= 0) {
    PostToServer();
  }
}

谢谢

Answer 1

首先请注意，如果 .Save 元素是表单中的 type="submit" 按钮（出于 HTML 验证和可访问性原因，它应该是），那么您不需要第一个 click 处理程序。

关于这个问题，你根本不需要在这里使用defer或done，因为你的逻辑没有任何内容是异步的。因此，这将正常工作：

$(document).on("submit", "form", function(e) {
  e.preventDefault();

  var isValid = ValidateEditForm();
  if (isValid) {
    PostToServer();
  } else {
    console.log('Form was invalid. Tell user...');
  }
});

function ValidateEditForm() {
  var errorCnt = $('#personEditForm .field-validation-error span').length;
  return errorCnt = 0;
}

注意使用单个 jQuery 对象选择所有错误 span 元素并获取 length 属性以查找计数。这取代了循环的需要。

如何在提交或阻止提交之前验证表单（不显眼）时使用 jquery .defer 或 .done

How to use jquery .defer or .done when validating a form (with unobtrusive) prior to submitting it or preventing submission

jquery

jquery-deferred