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

Question

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

我正在表单上使用不打扰的验证。有一个提交，然后我捕获该提交事件，在那里我得到错误计数。但是，我需要有一种方法等待错误计数功能完成，然后从那里调用一个函数来收集我的数据并将其发布（使用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属性以查找计数。这取代了对循环的需要。