寻求更优雅的解决方案来防止Default（）困境

Question

我有一个jQuery表单提交例程，该例程在ERROR_CHECK.PHP中具有输入完整性检查，该检查依赖于传递给它的GET变量进行检查。 如果传递给它的值格式错误，则会出现一个警告框，说明错误以及应如何纠正表单数据。 将需要弹出此警报框，直到表单数据不再格式错误为止，此时该数据将用于重新填充页面上的数据。

因此，在jQuery例程中，我受我们的朋友preventDefault()的摆布，并且我找到了一个可行的解决方案，但效果并不理想。 变量allowSubmit初始化为FALSE并保持这种方式-并同时生效了preventDefault() ，直到表单数据通过完整性检查为止，此时allowSubmit切换为TRUE ...，但这仅在提交正确的代码后才发生-形成的输入数据。 这意味着用户必须提交表单第二秒，以便表单数据可用于替换页面上的数据...这当然不是解决方案（按两次提交按钮？）

但是，通过在将allowSubmit重置为TRUE之后立即动态提交表单（在这里，使用$('#my_form').submit() statement) ，我再次提交了表单，从而允许用户提交格式正确的数据一次，应该从一开始就做。

显然，这是一个创可贴解决方案，并不优雅。 谁能看到一种更优雅的方式来构造它？ （我正在使用由另一位开发人员开发的jQuery，并且这种情况发生在更长的自调用JQuery函数之中，并且我必须按自己的意愿使用它，以免不得不重新修改较大部分的所有其他部分。它发生的功能。

这是对代码的精炼（带有自描述变量等），它的工作原理与所描述的一样，尽管不如我所希望的那样优雅：

var allowSubmit = false;
$('#my_form').on('submit', function(e) {
    if (!allowSubmit) { 
        e.preventDefault();
        // Check to see if input data is malformed:
        $.get('error_check.php', { new_element_name: $('#new_element_name').val() }, function(data) {
            if (data != 0) {
                alert("An Error Message that explains what's wrong with the form data");
            } else {
                allowSubmit = true;
                // The line below--an auto-submit--is needed so we don't have to press the submit button TWICE.
                // The variable allowSubmit is set to TRUE whenever the submitted form data is good, 
                // but the code suppressed by e.preventDefault() won't execute until the form is
                // submitted a second time...hence the need for this programmatic form submission here.
                // This allows the user to correct the errant form data, press the submit button ONCE and continue.
                $('#my_form').submit();
            }
        });
    }
    $('#element_name').val($('#new_element_name').val());
});

Answer 1

您正在执行的操作还可以，您的其他选择可能是为通用按钮编写一个点击处理程序，并在验证后通过该事件提交表单，然后您将需要preventDefault，因为您将不会阻止任何形式的提交动作。 另一个解决方案可能是在验证后重新触发事件。

           $("button").click(function() {
               $("#my_form").submit();
           });
           ...
                allowSubmit = true;
                // alternatively
                jQuery( "body" ).trigger( e );
           ...

Answer 2

您可以尝试使用async: false $.ajax使用async: false设置（我不知道您的php返回的是什么，所以我只是在“假装”它是一个json数组/字符串，如echo json_encode(array("response"=>$trueorfalse)); ）：

<script>
$('#my_form').on('submit', function(e) {
        var valid_is    =   true;
        // Check to see if input data is malformed:
        $.ajax({
                async: false,
                url: 'error_check.php',
                type: 'get',
                data: { new_element_name: $('#new_element_name').val() },
                success: function(response) {
                    var Valid   =   JSON.parse(response);
                    if(Valid.response != true) {
                            alert("An Error Message that explains what's wrong with the form data");
                            valid_is    =   false;
                        }
                }
        });

        if(!valid_is)
            e.preventDefault();

    $('#element_name').val($('#new_element_name').val());
});
</script>

如果使用async: false它将按顺序运行脚本，并等待执行脚本的其余部分，直到收到响应为止。 Scott G.说您可以对现有的东西做一些细微的修改，所以我会先尝试一下。

Answer 3

您拥有的回调解决方案似乎并不合理。 我同意@ scott-g的观点，通用按钮单击事件处理程序可能是最好的选择。 一种更可测试的方式来编写您的内容可能是：

var formView = {
  $el: $('#my_form'),
  $field: $('#element_name'),
  $newField: $('#new_element_name'),
  $submitBtn: $('#btn-submit')
}

var handleSubmit = function() {
  var formData = formView.$field.val();
  remoteVerify(formData)
    .done(formView.$el.submit)
    .done(updateForm)
    .fail(handleVerificationError);
};

var remoteVerify = function(formData) {
  var deferred = $.Deferred();
  var url = 'error_check.php';
  var data = { new_element_name: formData };
  $.get(url, data)
    .done(handleRequest(deferred))
    .fail(handleRequestErr);
  return deferred;
};

var handleRequest = function(deferred) {
  return function (data, jqxhr) {
    if (data != 0) {
      deferred.reject(jqxhr, "An Error Message that explains what's wrong with the form data");
    } else {
      deferred.resolve(data);
    }
  }
};

var handleRequestErr = function() {
  // error handling
}

var updateForm = function () {
  formView.$field.val(formView.$newField.val());
}

var handleVerificationError = function (jqxhr, errMsg){
  alert(errMsg); 
}

formView.$submitBtn.on('click', handleSubmit)