Javascript 寻找更优雅的解决方案来避免默认（）困境

我有一个jQuery表单提交例程，它在

ERROR\u check.PHP

中有一个输入完整性检查，它依赖于传递给它进行检查的

GET

变量。如果传递给它的值格式不正确，则会出现一个警告框，说明错误以及应如何修正表单数据。需要弹出此警报框，直到表单数据不再格式错误，此时该数据用于重新填充页面上的数据

因此，在jQuery例程中，我要听命于我们的朋友

preventDefault（）

，我找到了一个可行但不优雅的解决方案。变量

allowSubmit

被初始化为

FALSE

，并且在表单数据通过完整性检查之前，

preventDefault（）

也保持这种状态，此时

allowSubmit

切换为

TRUE

…但只有在提交正确格式的输入数据时才会发生这种情况。这意味着用户必须再次提交表单，才能使用表单数据替换页面上的数据……当然，这不是解决方案（按提交按钮两次？）

但是，通过在将

allowSubmit

重置为

TRUE

后立即动态提交表单（这里使用

$（“#my_form”）.submit（）语句）

，我再次提交了表单，从而允许用户提交一次正确格式的数据，从一开始就应该如此

这显然是一种创可贴解决方案，不雅致。有人能想出一种更优雅的方式来组织这个吗？（我正在使用另一个开发人员开发的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());
});

---

您现在所做的是可以的，您的其他选项可能是为通用按钮编写一个单击处理程序，并在验证后通过该事件提交表单，这样您就不需要preventDefault，因为您不会阻止任何类型的提交操作。另一个解决方案可能是在验证后重新触发该事件

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

---

您可以尝试使用

async:false

设置，使用

$.ajax

（我不知道您的php返回了什么，所以我只是“假装”它是一个json数组/字符串，就像这样

echo json_encode（数组（“响应”=>$trueorfalse））；

）：

$（“#我的表格”）。关于（'submit'，函数（e）{
var valid_=true；
//检查输入数据是否格式错误：
$.ajax({
async:false，
url:“error_check.php”，
键入：“get”，
数据：{new_element_name:$（'new#element_name'）.val（），
成功：功能（响应）{
var Valid=JSON.parse（响应）；
if（Valid.response！=true）{
警报（“解释表单数据错误的错误消息”）；
valid_=false；
}
}
});
如果（！valid_为）
e、 预防默认值（）；
$（'#element_name'）.val（$（'#new#element_name'）.val（））；
});

---

如果您使用

async:false

它会按顺序运行脚本，并在收到响应后等待执行脚本的其余部分。Scott G.说您可以使用您所拥有的内容，只需稍加修改，所以我会先尝试一下。

您使用的回调解决方案似乎并不合理。我同意@Scott-G的观点，即generic按钮点击事件处理程序可能是您的最佳选择。编写您在此处拥有的内容的更易测试的方法可能是：

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)

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)