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会起作用，但我不确定如何将条件语句绑定到事件中。

修改

好的，所以我犯了严重过度思考这个问题的罪行，并提出了一个解决方案，我将在下面提出（如果有人有兴趣的话）

Answer 1

由于您的验证包含异步步骤，因此您可以更轻松地立即停止表单提交。

然后调用验证函数，该函数将在＆＃34; global＆＃34;中设置表单的验证状态。 state（可能只是事件处理程序的闭包）。如果验证没问题，请提交表单，否则只显示验证错误。

＆＃13;

// 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);
  }
}

＆＃13;

Answer 2

这种方法怎么样，这是一个简单的骨架：

$('#form').submit(function(e){

       var formError = false;

       // set formError to true if any of the checks are not met.
       if(some condition) {
           // do a conditional check
          formError = true;
       } else if(another condition) {
          // do another conditional check
          formError = true;
       }

       if(formError) {  // stop form submission of any of the conditions are not met.
          return false; // same as e.preventDefault and e.stopPropagate()
       }

});

Answer 3

事实证明我是在严肃地过度思考这个问题。通过将所有内容绑定到一个不是提交的按钮来处理它会更容易，如果通过验证只需使用提交条件。这样我就不必担心防止默认行为并再次打开它（这是我被卡住的地方）。由于常规按钮没有默认行为，因此无需担心其提交错误。

原始功能只需简化为：

    var verifyValue = function() {
        if($('#value_of_json_array').val().length != 0){
            $('#value_of_json_array').prop("readonly", true);
            $('#barcode-buttons').hide();
            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){
           $('#form').submit()       
    }
    else {
        //error conditions

    }
};

详细的条件提交preventDefault

3 个答案: