2

一種の「ソフト」検証に 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 を返しますが、フォームは実際には送信されません...

ここではより良い方法論が欠けていると確信していますが、主な目標は、非同期の dialog() で同期の confirm() の動作をシミュレートできるようにすることです。

4

1 に答える 1

0

あなたの問題を正しく理解していれば、解決策は次のとおりです。（私はアクションを別々の機能に分けました（管理しやすい））：

  1. (通常) フォームを送信すると、エラーがあるかどうかがチェックされます - dataLooksFishy()
  2. エラーがある場合 - ダイアログがポップアップするはずです

  3. ユーザーが「はい」をクリックした場合 - フォームは「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;

ここに投稿していないため、フォームでテストできませんでした。この解決策に問題がある場合は、ここにコードをさらに投稿してください。私がお手伝いします。

于 2012-08-20T12:25:50.857 に答える