javascript - 详细条件提交preventDefault

Question

我花了一些时间环顾四周并尝试了多种解决方案，但没有成功，同时尝试简化表单以创建伪批量流程。

本质上，我只需要防止提交按钮出现默认情况，但在满足多个子条件时触发它，至少其中一个子条件使用 ajax 调用。

我尝试了 e.preventDefault、$('#form').submit(false); 的变体，我可以进行验证，或要提交的表格，但两者都不能放在正确的位置。 (例如，它将在不检查重复条目的情况下提交)

这是我一直在尝试的总结版本。

这是保存检查第一部分的主变量:

    var verifyValue = function() {
// this stops the form, and then things validate fine.
        $('#add-item-form').submit(false);
//but then I need to get it started again to submit valid entries


        if($('#value_of_json_array').val().length != 0){
            $('#value_of_json_array').prop("readonly", true);
            jQuery.getJSON('{{ path('query_to_get_array') }}?' +
                    $.param({barcode: $('#value_of_json_array').val()}))
                    .done(checkedValue);
        }
    };

这就是它的名称:

$("#verify-value").click(verifyValue);

以下是正在运行的条件的简写:

    var checkedValue = function(items) {
        if(items.length == 0){

          // success conditions
        }
        else {
//this was just one attempt

            $('#form').submit(false);

                if( /* sub condition of data passed from JSON array */){
                           //condition creates new form which upon action sends AJAX call
                }
                else
                {
                    //second error condition
                }
        }
    };

我想做的是，如果出现任何子条件，则让它停止提交按钮(例如 preventDefault 行为)，如果没有任何这些子条件，则停止提交按钮允许提交表单

感觉它应该很简单，但是无论我在哪里执行此操作，包括使用 $(this).unbind('submit').submit() 它都无法正常工作。

要么验证正确并且不提交任何内容，要么即使不应该提交所有内容也都提交。

我觉得修改 var verifyValue 会起作用，但我不确定如何将条件语句绑定(bind)到事件中。

<小时/>

编辑:

好吧，所以我对这个问题考虑得太多了，并提出了一个解决方案，我将在下面列出(以防有人感兴趣)

Answer 1

由于您的验证包括异步步骤，因此立即停止表单提交会更容易。

然后调用您的验证函数，该函数会将表单的验证状态设置为“全局”状态(可能只是事件处理程序的关闭)。如果验证正常，则提交表单，否则仅显示验证错误。

// You'll need to reset this if an input changes
var isFormValid = false;

$("#form").on('submit', function(e) {
  if (isFormValid) {
    return true;
  }
  
  e.preventDefault();
  
  validateForm(function(valid) {
    if (valid) {
      isFormValid = true;
      $('#form').submit();
    }
  });
});

function validateForm(cb) {
  var form = $('#form');
  
  // do some synchronous validations on the form inputs.
  // then do the async validation
  
  if($('#value_of_json_array').val().length != 0){
    $('#value_of_json_array').prop("readonly", true);
    jQuery
      .getJSON(
        '{{ path('query_to_get_array') }}?' +
        $.param({barcode: $('#value_of_json_array').val()})
      )
      .done(function(result) {
        if (checkedValue(result)) {
          cb(true);
        } else {
          cb(false);
        }
      });
  } else {
    cb(false);
  }
}