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

【问题标题】：How to use jquery .defer or .done when validating a form (with unobtrusive) prior to submitting it or preventing submission在提交或阻止提交之前验证表单（不显眼）时如何使用 jquery .defer 或 .done
【发布时间】：2020-01-20 08:49:10
【问题描述】：

从其他示例中，我尝试使用 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();
  }
}

谢谢

【问题讨论】：

这里不需要defer 或done，因为获取计数的each 循环不是异步的。话虽如此，您根本不需要循环：var errorCnt = $('#personEditForm .field-validation-error span").length 将起作用
另外请注意，如果.Save 元素是表单中的type="submit" 按钮（因为它应该是出于HTML 验证和可访问性的原因），那么您不需要第一个click 处理程序完全没有。
提交按钮不是提交类型，因为必须进行验证，然后如果有效，我会创建一大堆字符串化的序列化对象来回发..但它似乎没有击中 $(document ).on("submit, "form",...函数。（我在里面放了一个alert来检查）
The submit button is not of type submit as validation has to occur 验证应该由提交事件触发，所以这没有多大意义。
我使用 $("#personEditForm").submit(); ..所以我猜同样的事情？或不？谢谢

标签： jquery jquery-deferred

【解决方案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 属性来查找计数。这取代了循环的需要。

【讨论】：

Point re submt 按钮很好，谢谢。但无论哪种方式将其捕获为按钮单击或将其指定为 type=submit，$(document).on("submit", "form", function (e){ alert("here"); } 都不会触发。需要先找出原因。谢谢
如果您将 HTML 添加到问题中，我可以帮助您解决问题
谢谢，但发现我的错误并且您的解决方案有效。