Question

我正在尝试使用jQuery UI对话进行某种“软”验证 - 如果表单看起来很可疑，请警告用户，但允许他们继续提交：

// multiple submit buttons...
var whichButton;
$("#myForm").find("[type=submit]").click(function()
{
  whichButton = this;
}

var userOkWithIt = false;
$("#myForm").submit(function()
{
  if (dataLooksFishy() && !userOkWithIt)
  {
    $("Are you sure you want to do this?").dialog(
    {
      buttons:
      {
        "Yes": function()
        {
          $(this).dialog("close");

          // override check and resubmit form
          userOkWithIt = true;
          // save submit action on form
          $("#myForm").append("<input type='hidden' name='" +
            $(whichSubmit).attr("name") + "' value='" +
            $(whichSubmit).val() + "'>");
          $("#myForm").submit(); /******  Problem *********/
        },
        "No": function() { $(this).dialog("close"); }
      }
    });
    return false; // always prevent form submission here
  } // end data looks fishy

  return true; // allow form submission 
});

我用一堆调试警报语句检查了这一点。控制流程正是我所期望的。如果我第一次失败dataLooksFishy（），我会看到对话框，并且该方法异步返回false。

单击“是”会重新触发此方法，这次方法返回true，然而，表单实际上没有提交...

我确信我在这里缺少更好的方法，但主要目标是能够使用异步对话框（）模拟同步confirm（）的行为。

Answer 1

如果我理解你的问题 - 这是解决方案。（我已将操作分成单独的功能（更易于管理））：

提交表格（通常）会检查是否有错误 - dataLooksFishy（）
如果有错误 - 应弹出一个对话框

如果用户点击“是” - 表单将以“force = true”

提交

var
form = $("#myForm"),

formSubmit = function(force){
    if (dataLooksFishy() && force !== true) return showWarning();   // show warning and prevent submit
    else return true;                                               // allow submit
},

showWarning = function(){
    $("Are you sure you want to do this?").dialog({ buttons: {
        "Yes": function(){ $(this).dialog("close"); formSubmit(true); },
        "No": function() { $(this).dialog("close"); }
    }});
    return false;
},
dataLooksFishy = function(){ 
    return true;     // true when there are validation errors
};

// plain JS form submitting (also works if you hit enter in a text field in a form)
form[0].onsubmit = formSubmit;

我无法使用您的表单对其进行测试，因为您尚未在此处发布。如果您对此解决方案有疑问，请在此处发布更多代码，我会尽力提供帮助。

如何在jQuery UI对话框回调中重新触发表单提交事件

1 个答案: