none
OnClientClickを利用すると、ValidationSummaryが無効になる RRS feed

  • 質問

  • Windows 2003 Server 上で、ASP.NET C# を動かしています。
    商品マスターを登録する画面で、
    必須項目は、未入力の際、ValidationSummaryで、未入力とエラーが出るように画面を作成しています。
    気付かないうちにEnterを押して、登録されないようにするため、
    OnClientClickで、「登録してもいいですか?」と表示されるようにしたいのですが、
    ValidationSummaryのみだと問題なかったのに、
    OnClientClickを利用したら、ValidationSummaryが無効?になり、
    必須項目が未入力でも、未入力のエラーが表示されず、「登録してもいいですか?」のみ…。

    WizardStepを使用して登録前の確認画面を出していた時は、OnClientClickの必要がなかったのですが、
    今回、WizardStepを使用しても登録前の確認画面を出さないため、OnClientClickが必要になりました。

    未入力のチェックと、登録確認のコメントが両方使える、何か方法はありませんか?

    <asp:TextBox ID="商品名" runat="server" />
    <asp:RequiredFieldValidator ID="ShouhinRequired" runat="server" ControlToValidate="商品名"
            ErrorMessage="商品名" SetFocusOnError="True" ToolTip="商品名" validationgroup="touroku">*</asp:RequiredFieldValidator>
    <asp:Button ID="TourokuButton" runat="server" CommandName="MoveComplete" Text="登録" 
            validationgroup="touroku" OnClientClick="return confirm('登録してもいいですか?')" />
    <asp:ValidationSummary ID="summary" runat="server" ValidationGroup="touroku" HeaderText="必須項目が未入力です。"
            ShowMessageBox="True" ShowSummary="False" />
    2009年11月16日 5:54

回答

  • あ、これ知りませんでした。
    OnClientClickのJSコードと検証のJSコードが単に文字列として結合されるんですね。

    それだったら、OnClientClickには "if (!confirm('登録してもいいですか?')) return false;"

    と書くように変更するだけで検証用コードと問題なく共存できますね。

    • 回答としてマーク mikako0110 2009年11月20日 5:57
    2009年11月20日 5:45

すべての返信

  • いろいろな方法があるかと思いますが、一番簡単なのはボタンにOnClientClickを仕込むのではなく、Formに OnSubmit を仕込むことでしょうか。

    ボタンが複数あると押されたボタンを判定する必要が出てきますが。
    2009年11月16日 8:22
  • 質問の意味がよく理解できていませんので、ハズレかもしれませんが・・・

    > 気付かないうちにEnterを押して、登録されないようにするため、

    だけが目的であれば、Enter キーを押しても Submit されないようにすればいいので
    は? 

    TextBox に入力しているときに Enter キーを押しても無効にするには form に以下
    を追加します。

    onkeydown="if( (event.keyCode == 13) && (event.srcElement.type == 'text') )return false;"

    Enter キーを完全に無効にしたい場合(例えば Button にフォーカスがあっても Enter
    キーで Submit しないようにする)は以下のようにします。

    onkeydown="if (event.keyCode == 13) return false;";

    2009年11月16日 13:39
  • ASP.NET で、「おかしいな?」と思ったら、必ず HTML のソースを確認するクセを付けて欲しいと思います。そうすると、原因がわかります。

    いま、TourokuButton の HTML レンダリングされた状態を確認すると、onclick イベントが、次のように定義されていると思います。
    return confirm('登録してもいいですか?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "v1", "", false, false))

    これは私の環境なので、細かいところは違っているかもしれません。ここで重要なのは、検証がいつ発生するか、です。検証は、WebForm_DoPostBackWithOptions 関数で行われます。しかし、その前に OnClientClick プロパティに定義した return 文が存在しています。このため、検証が行われません。


    対策としては、miuras_netさんの方法でも、SurferOnWwwさんの方法でも、お好きな方法で。


    Jitta@わんくま同盟
    2009年11月18日 14:00
  • SurferOnWwwさん、回答ありがとうございます。

    > > 気付かないうちにEnterを押して、登録されないようにするため、
    > だけが目的であれば、Enter キーを押しても Submit されないようにすればいいので
    > は? 

    各Buttonにカーソルが来た時はEnterキーで処理したいので、
    TextBoxなどにカーソルがある場合にのみEnter キーを押しても
    Submit されないようにしたいのです。
     
    開発中のサイトを利用する方は、少しパソコンを触れる程度の初心者がほとんど。
    ソフトウェアではEnterキーで移動するものが多く、
    クセでEnterキーを押してしまう方を防止したいのです。

    説明不足で申し訳ありません。

    2009年11月20日 1:40
  • あ、これ知りませんでした。
    OnClientClickのJSコードと検証のJSコードが単に文字列として結合されるんですね。

    それだったら、OnClientClickには "if (!confirm('登録してもいいですか?')) return false;"

    と書くように変更するだけで検証用コードと問題なく共存できますね。

    • 回答としてマーク mikako0110 2009年11月20日 5:57
    2009年11月20日 5:45
  • miuras_net さん、回答ありがとうございます。

    ありがとうございます!!
    回答通りの OnClientClick="if (!confirm('登録してもいいですか?')) return false;" でイケました。
    onSubmit がよく分からなくて、色々試していたところです。

    未入力エラーが先に出て、未入力のものが無くなったら、「登録してもいいですか?」が出るのが、理想でしたが、
    「登録してもいいですか」→「OK」クリック→未入力エラー でも全然問題ないです。

    本当に、ありがとうございました。
    2009年11月20日 5:57
  • Jitta さん、回答ありがとうございます。
    HTMLソースは、見ているのですが、
    あまりにも変わり過ぎて、解析するのが大変で、いつも挫折・・・。

    miuras_net さんの回答で、解決できました。
    ありがとうございました。
    ご指摘の通り、HTMLソースはこれからも見るようにします。
    2009年11月20日 6:03
  • > 各Buttonにカーソルが来た時はEnterキーで処理したいので、
    > TextBoxなどにカーソルがある場合にのみEnter キーを押しても
    > Submit されないようにしたいのです。

    それは先のレスに書いたつもりですけど、試してみましたか? もしまだなら、もう一度書いておき
    ますのでお試しください。

    TextBox に入力しているときに Enter キーを押しても無効にするには form に以下
    を追加します。

    onkeydown="if( (event.keyCode == 13) && (event.srcElement.type == 'text') )return false;"

    2009年11月20日 13:25
  • あ、これ知りませんでした。
    OnClientClickのJSコードと検証のJSコードが単に文字列として結合されるんですね。

    それだったら、OnClientClickには "if (!confirm('登録してもいいですか?')) return false;"

    と書くように変更するだけで検証用コードと問題なく共存できますね。


    その方法は、先の投稿に載せようと思ったのですが、「エラーで登録できない」時にも「登録してもいいですか?」と聞いてきます。これは、大変煩わしいことです。「登録できないのなら、先にそっちを通知しろよ」と。

    そんなわけで、私的にはボツです。


    mikako0110さん:
    ところで、SetFocusOnError="True" にしても、「2回操作すると、フォーカスは移動してしまいます」。それは、かまいませんか?また、サーバーでの検査は、必ず行ってください。
    Jitta@わんくま同盟
    2009年11月20日 14:09