ASP.Net + jQueryの+ jQueryの検証プラグイン+のUpdatePanel + nyroModal - 各フィールドの上に発射成功！

StackOverflow https://stackoverflow.com/questions/850777

質問

私は、ユーザーが価格（数字）を移入した入力フィールドのリストを含むフォームを持っています。私は彼らのCSSクラスを「必須」と「数」jQueryの検証プラグインはそれに応じてそれらを検証するように設定しています。すべてのことは完璧にうまく機能しています。などの各フィールドのいずれかではない数または値が欠落しているときにエラーが表示されます。

このフォーム全体はnyroModal（jQueryのプラグイン）モデルポップアップウィンドウ内に実際にあります。しかし、それは関係なく、そのちょうど.aspxのWebフォームを問題ではないはず。私のフォームは、基本的に2段階のプロセスであるので、その中で、私はまたのUpdatePanelを使用しており、その中にすべてをかけます。ユーザーがフォームの最初の「ページ」で完了しなければならないいくつかの基本的なステップがあります。それが検証され、働くとき、私は上記のように、すべての価格テキストボックスの入力フィールドでユーザーフォームの次の「ページ」を表示するのUpdatePanel内のいくつかの要素を表示/非表示にします。

私は、フォームを検証するためのトリガーポイントとしてのImageButtonを使用しています。あなただけのImageButtonにそれがある方法を残す場合は、そのすべてのUpdatePanelの内部で起こっているため、デフォルトで、.NETは、私の場合はポストバック、AJAXポストバックをオフに起動します。これは再び、望まれています。私は明白な理由のために醜いフルポストバックを望んでいない。

は、読書をたくさんした後、私は.NETはjQueryのが正常にフォームを検証したりしていなかった場合に基づいて、ポストバックを、やってみたかったときに私が傍受できるようにJavaScriptでの.NetのPageRequestManagerに接続する方法が必要でした。デフォルトでは、ポストバックを許可していませんが、jQueryが成功し、フォームを検証する場合、ポストバックは現在許可され、その後、ポストバックが発生しようとする次の時間は、それが通過することを述べている変数を設定します。だから、私のロジックは述べています。そのため、ユーザーへの成功を表示します。

これは、合理的な種類のすべての作業ですが、1つの最終問題があります。

jQueryの検証プラグインのvalidate（{成功}）オプションでは、検証は、個々のフィールド全体ではなく、フォームに成功した後、誤って発射しているようです。即ち私は価格の入力フィールドのいずれかに番号を入力する場合は、この成功オプションが順番にフォームが、今では一つのフィールドだったという理由だけで、検証されていないにもかかわらず、提出することを意味し、falseに私のcancelPostback変数を発射し、設定します有効。フォーム全体が検証された後、私は火にこの検証（{成功}）オプションを期待しているだろう。

は、私が間違ってこれを解釈しており、実際にはそのは、そのことを意味したものやって？ もしそうなら、どのように私は単純にフォーム全体が検証された場合にのみtrueに私のcancelPostback変数を設定することができますか？

任意の洞察力やヘッドアップのおかげでヒープを。

次のように検証を実装しても、ネットのポストバックイベントを傍受するために私のjQueryのコードがあります：

<script type="text/javascript">
    // By default, don't allow Postback until we've successfully validated our form on the client-side.
    var cancelPostback=true;

    // Every single time the page loads, including every single AJAX partial postback
    function pageLoad()
    {
        // Reset the value to say that "We don't allow Postbacks at this stage"..
        cancelPostback=true;

        // Attach client-side validation to the main form
        $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } });

        // Grab a reference to the Page Request Manager
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(onEachRequest);

        alert("Page Load");
    }

    // Our own custom method to be attached to each new/future page request..
    function onEachRequest(sender, args)
    {
        alert("About to cancel? " + cancelPostback);
        // Check to see if we need to Cancel this Postback based on Conditional Logic within this page..
        args.set_cancel(cancelPostback);
    }
</script>
役に立ちましたか？

解決

私はsubmitHandlerとinvalidHandlerオプションを見てお勧めします。どちらか一方では、あなたが望むもののために働くべきです。最良の方法は、私が思うに、デフォルトでポストバックを許可し、invalidHandlerでtrueにcancelPostbackを設定することです。また、あなたが__doPostBackを直接呼び出してのImageButtonを経由して提出を置き換える独自のsubmitHandlerを書くことができます。

他のヒント

IE以外のすべてのブラウザは、jQueryのバリデータのsubmitHandler（）関数の前に「onEachRequest」機能を発射されたため、

私はあなたのソリューションとの問題を抱えていました。私は、検証が失敗した場合、単純ではなく、プリセット変数に頼るよりも、ポストバックをキャンセルし、よりエレガントな解決策を考え出したています。

  Sys.Application.add_init(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(onEachRequest);
  }); 

  function onEachRequest(sender, args) {
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) {
      args.set_cancel(!$('#aspnetForm').valid());
    }
  }

プロンプトの支援のおかげでヒープのtvanfossonます。

[OK]をアップデートます：

私はより多くのリンクが続き、最終的には「成功」のドキュメントを見つけました。プラグイン自身のホームページ上のドキュメントはひどいですし、多くの重要な機能を省略します:)しかし、公式のjQueryページ上の「よりよいです」。 「成功」オプションは、個々のフィールドが正常に検証された一つ一つの時間を発射するためのものです。だから、設計によって働いていたと私は誤ってフォーム全体が有効だったときにのみ発火うと仮定した。

私はあなたのinvalidHandlerのアイデアを試してみました。私はこのアイデアを愛しました。私は反対思い付いた1つの問題は、のImageButtonのポストバックはまだ常に最初にオフに解雇ということだったので、invalidHandlerコードが実行されます前に戻って投稿を開始します。だから、ポストバックは、まだ彼らは残念ながら間違った順序で焼成して、その後、invalidHandlerは将来のポストバックを無効になり、先に行くだろう。しかし、それとは別に、それは完璧なソリューションであることの他のすべての兆候を示しています。

私はその後submitHandlerの方法、すなわち逆をしようと、他の方法を行ってきました。ポストバックが再び最初の発射だろうが、ブロックされ、その後、submitHandlerは将来のポストバックが可能になるが、それは既に手遅れだったので、このポストバックが失われたため、繰り返しますが、これは、いくつかの順序の問題に苦しみました。あなたはそれが行くために得ることを再度2回ボタンをクリックする必要があると思います。

だから、最後の半kludgeyソリューション、それは正直に言うにはあまりにも悪くはない、だっます：

私はこの行を次のように変更されました：             //メインフォームにクライアント側の検証を取り付け             $（ "＃<％= form1.ClientID％>"）を検証。（{submitHandler：偽関数（）{PreventPostback =と、__doPostBack（ 'UpdatePanel1'、 ''）;}}）;

あなたが見ることができるように最初のポストバックは既にブロックされ、オフに死亡されていたので、最初のPreventPostback変数を切り替えますが、その後、手動で新しいポストバックをオフにトリガーします。したがって、このマニュアル__doPostBackコールは新しいポストバックがPreventPostbackの新しい価値を尊重オフに解雇されることを保証します。

私はImageButtons背後からイベントメソッドを削除し、私はこの検証ロジックからされている必要があります知っているページがポストバックされたときにのみ呼び出され「DoPostBackLogic（）」と呼ばれるサーバー側のコードで新しい方法を、作られました、それは私のフォーム上で発生する可能性が唯一のポストバックだから。そして、表示/非表示/保存ロジックのすべては私のためにそこに起こります。これは私が手動で__doPostBackを呼び出す午前とき、私は単に特定のImageButtonなどを模倣する心配のUpdatePanelのIDを使用していないことを意味します。

それは完璧に動作します。

この方法で。ポストバックがデフォルトで無効にされ、そしてフォームが有効であるとき、ポストバックが、その後許可されますが、新しい値が有効になるように、ポストバックが、手動でトリガされます。

これは、基本的に再びリスニングと共有するためのおかげで、2番目のソリューションです！ ：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top