3

ユーザーが価格（数値）を入力する入力フィールドのリストを含むフォームがあります。jQuery検証プラグインがそれに応じて検証するように、cssクラスを「required」と「number」に設定しました。すべてが完全にうまく機能しています。エラーは、各フィールドが数値でないか、値が欠落している場合などに表示されます。

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

フォームを検証するためのトリガーポイントとしてImageButtonを使用しています。デフォルトでは、ImageButtonをそのままにしておくと、すべてUpdatePanel内で発生するため、.Netはポストバック（私の場合はAJAXポストバック）を起動します。これもまた望ましい。明らかな理由で、醜い完全なポストバックは必要ありません。

たくさん読んだ後、jQueryがフォームを正常に検証したかどうかに基づいて、.Netがポストバックを実行したいときにインターセプトできるように、JavaScriptで.NetのPageRequestManagerにアタッチする方法が必要でした。したがって、私のロジックは次のように述べています。デフォルトでは、ポストバックを許可しませんが、jQueryがフォームを正常に検証したら、ポストバックが許可されるようになったことを示す変数を設定します。次にポストバックが実行されると、それが実行されます。したがって、ユーザーに成功を表示します。

これはすべてかなりうまく機能していますが、最後の問題が1つあります。

jQuery検証プラグインのvalidate（{success}）オプションは、フォーム全体ではなく、個々のフィールドで検証が成功した後、誤って起動しているようです。つまり、価格入力フィールドのいずれかに数値を入力すると、この成功オプションが起動し、cancelPostback変数がfalseに設定されます。これは、1つのフィールドがあるという理由だけで、検証されていなくてもフォームが送信されることを意味します。有効でした。このvalidate（{success}）オプションは、フォーム全体が検証された後にのみ起動することを期待していました。

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

洞察や頭を上げてくれてありがとう。

検証を実装し、.Netポストバックイベントをインターセプトするための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>
4

3 に答える 3

3

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());
    }
  }
于 2010-06-30T16:02:09.203 に答える
1

迅速な支援をしてくれたheapstvanfossonに感謝します。

更新：OK

私はますます多くのリンクをたどり、最終的に「成功」​​のドキュメントを見つけました。プラグイン自体のホームページのドキュメントはひどく、多くの重要な機能が省略されています:)しかし、公式のjQueryページでは「より良い」です。「成功」オプションは、個々のフィールドが正常に検証されるたびに起動することを目的としています。そのため、これは設計上機能しており、フォーム全体が有効な場合にのみ起動すると誤って想定していました。

私はあなたのinvalidHandlerのアイデアを試しました。私はこのアイデアが大好きでした。私が遭遇した問題の1つは、ImageButtonのポストバックが常に最初に起動するため、invalidHandlerコードが実行される前にポストバックを開始することでした。したがって、ポストバックは引き続き続行され、その後、invalidHandlerは将来のポストバックを無効にし、残念ながら間違った順序で起動していました。しかし、それを除けば、それは完璧な解決策であるという他のすべての兆候を示しました。

次に、submitHandlerの方法を試して、逆の方法を試しました。繰り返しになりますが、これはいくつかの順序の問題に悩まされていました。ポストバックが最初に再び起動され、ブロックされ、submitHandlerが将来のポストバックを許可するためですが、すでに遅すぎたため、このポストバックは見逃されました。ボタンを動かすには、ボタンをもう一度2回クリックする必要があります。

したがって、最終的な半難解な解決策は、正直に言うとそれほど悪くはありませんが、次のようになりました。

この行を次のように変更しました。//クライアント側の検証をメインフォームにアタッチ$（ "＃<％= form1.ClientID％>"）。validate（{submitHandler：function（）{PreventPostback = false; __doPostBack（'UpdatePanel1' 、''）;}}）;

ご覧のとおり、最初にPreventPostback変数を切り替えますが、最初のポストバックはすでにブロックされて終了しているため、手動で新しいポストバックを起動します。したがって、この手動の__doPostBack呼び出しは、PreventPostbackの新しい値を尊重して新しいポストバックが確実に実行されるようにします。

ImageButtonsの背後からイベントメソッドを削除し、サーバー側のコードに「DoPostBackLogic（）」という新しいメソッドを作成しました。これは、ページがポストバックされたときにのみ呼び出されます。これは、この検証ロジックからのものである必要があります。私のフォームで発生する可能性がある唯一のポストバック。次に、すべての非表示/表示/保存ロジックがそこで発生します。つまり、手動で__doPostBackを呼び出す場合、UpdatePanelのIDを使用するだけで、特定のImageButtonなどを模倣する必要はありません。

このようにそれは完全に動作します。ポストバックはデフォルトで無効になっており、フォームが有効な場合はポストバックが許可されますが、新しい値が有効になるようにポストバックが手動でトリガーされます。

つまり、これは基本的に2番目の解決策です。もう一度聞いて共有していただき、ありがとうございます。:)

于 2009-05-12T04:55:18.753 に答える
1

submitHandlerオプションとinvalidHandlerオプションを確認することをお勧めします。どちらか一方があなたが望むもののために働くべきです。最善の方法は、デフォルトでポストバックを許可し、invalidHandlerでcancelPostbackをtrueに設定することだと思います。または、__ doPostBackを直接呼び出し、ImageButtonを介して送信を置き換える独自のsubmitHandlerを作成することもできます。

于 2009-05-12T02:27:59.493 に答える