代码之家 › 专栏 › 技术社区 › nomistic

详细条件提交预防默认值

twig ajax jquery javascript

nomistic · 技术社区 · 6 年前

我花了一些时间四处查看并尝试了多个解决方案,同时尝试简化表单以创建伪批量处理。

从本质上讲,我只需要防止提交按钮出现默认值,但如果满足多个子条件(其中至少有一个使用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 将起作用,但我不确定如何将条件语句绑定到事件中。

编辑:

好吧,所以我对这个问题的严重过度思考感到内疚,并提出了一个解决方案,我将把它放在下面(以防有人感兴趣)

3 回复 | 直到 6 年前

squgeim 6 年前

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

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

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

Alexander Solonik 6 年前

这种方法怎么样,这里有一个简单的框架:

$('#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()
       }

});

nomistic 6 年前

原来我对这个问题想得太多了。通过将所有内容绑定到一个不是提交的按钮中,处理起来要容易得多,如果它通过了验证,只需使用提交条件即可。这样,我就不必担心如何防止违约行为并再次启用它(这正是我陷入困境的地方)。由于常规按钮没有默认行为,因此无需担心它提交错误。

原始功能只需简化为:

    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

    }
};