Question

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

因此，在jQuery例程中我受朋友preventDefault()的支配，我找到了一个有效但不优雅的解决方案。变量allowSubmit初始化为FALSE并保持这种方式 - preventDefault()也生效 - 直到表单数据通过完整性检查，此时allowSubmit切换到{ {1}} ...但只有在提交正确形成的输入数据时才会发生这种情况。这意味着用户必须提交一个SECOND TIME表单，以便使用表单数据替换页面上的数据......当然，这不是一个解决方案（按两次提交按钮？）

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

这显然是一种创可贴解决方案而不是优雅。谁能看到更优雅的方式来构建这个？（我正在使用由另一个开发人员制作的jQuery，这发生在一个更长的自我调用JQuery函数中，我必须按照自己的条件使用它，以免我必须重新设计其他所有部分它发生的较大功能。

这里是代码的精炼（带有自我描述的变量等），它按照描述的方式工作，虽然不像我喜欢的那样优雅：

TRUE

Answer 1

你正在做什么是好的，你的其他选择可能是为通用按钮编写一个点击处理程序并在验证后通过该事件提交表单，然后你不需要阻止默认，因为你不会阻止任何类型的提交行动。另一种解决方案可能是在验证后重新触发事件。

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

Answer 2

您可以尝试使用async: false使用$.ajax设置（我不知道您的php返回了什么，所以我只是“假装”它是一个json数组/字符串，所以{{1 }}）：

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>，它会按顺序运行脚本，并等待执行脚本的其余部分，直到收到响应为止。 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)

寻求更优雅的解决方案，以防止默认（）进退两难

3 个答案: