none
Ajax のCalendarExtenderのvalidate RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票
    フォーラムの皆さんこんにちは　

    TextBox1,TextBox2に日付を入力する方法として(開始日付、終了日付）
    Ajax のCalendarExtenderを使用しようと考えております。

    行いました手順といたしましては
    １）form上にTextBox1,TextBox2を配置
    ２）そのコントロールTextBox1,TextBox2に　必須入力の為　RequiredFieldValidatorを設定
    ３）TextBox2にCompareValidatorを設定しTextBox1,TextBox2の大小比較チェック　
    ４）ボタンを配置し　response.redirectで他ページにリダイレクト

    以上で一旦テスト　必須入力ＯＫ

    ４）Ajax  CalendarExtenderを配置したところ　
    どうも　RequiredFieldValidatorやCompareValidatorが効いていない様子

    （TextBoxが空白のままでも　ボタンが押せて実行される）

    ここでアドバイスいただきたのですが
    Ajax のCalendarExtendeを配置したTextBoxの入力チェックはどうすれば行えるのでしょうか？
    アドバイスお願いいたします。
    2013年7月21日 6:43
    |

回答

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票

    > RequiredFieldValidatorやCompareValidatorが効いていない様子

    そんなことはないはずですが。問題を再現できる必要最小限のコードをアップできませんか？　（長いコードをベタッと貼り付けないで、あくまで必要最小限でお願いします）

    ＜追伸＞

    ご自分の環境（OS, .NET, Toolkit のバージョンなど）も書いてください。

    • 編集済み SurferOnWww 2013年7月22日 2:47 追伸を追加
    • 回答の候補に設定 星 睦美 2013年7月25日 5:35
    2013年7月21日 7:58
    |
  • Question
    サインインして投票
    0
    サインインして投票

    前のレスで「そんなことはないはず」と言った手前、もし何かあるとウソを言ったことになるので、実際にコードを書いて検証してみました。

    でも、やっぱりそんなことはなかったです。

    少なくとも、RequiredFieldValidator が設定されているのに、「TextBoxが空白のままでも　ボタンが押せて実行される」ということはなかったです。ボタンは押せますが、デフォルト設定ではポストバックもかからないはずです。

    CompareValidator の方は、CalendarExtender の設定がデフォルトのままでは TextBox への入力が MM/dd/yyyy という形式になるので、パースがうまくいかず期待した結果にならないということはあるかもしれません。

    やり方の問題だと思います。しかし、質問者さんがどういうやり方をしたのかはコードを見せてもらわないと分かりません。なので、現状では、質問者さんのやり方のどこに問題があるかはわかりません。

    2013年7月23日 1:12
    |
  • Question
    サインインして投票
    0
    サインインして投票

    SurferOWww様　

    早速のご回答ありがとうございます。

    現在出張中で　返信が遅れましたことお詫び申し上げます。

    出張から戻り次第　最小限のソースコードをＵＰさせていただきます。

    しばらくお時間がかかる事お許し願います。

    私の環境ですが

    OS：Win7 Pro   VS2012Express For Web

    ToolKitはVSの管理ツールNuGetよりajax tool kitをインストールしました。


    2013年7月23日 21:47
    |
  • Question
    サインインして投票
    0
    サインインして投票

    SurferOnWww様

    ソースコードを添付させていただきます

    aspx側です
    -------------------------------------------------------------------------------------
    <body>
        <form id="form1" runat="server">
        <div>

    日付From：<asp:TextBox ID="Txt_Date_Fr" runat="server"></asp:TextBox>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="Txt_Date_Fr" 
                   ErrorMessage="開始日付を入力して下さい"></asp:RequiredFieldValidator>
              <ajaxToolkit:CalendarExtender ID="Txt_Date_Fr_CalendarExtender" runat="server" Enabled="True" 
                   TargetControlID="Txt_Date_Fr">
              </ajaxToolkit:CalendarExtender>
              <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True">
              </asp:ScriptManager>
    <br />
    日付To：<asp:TextBox ID="Txt_Date_To" runat="server"></asp:TextBox>
            <ajaxToolkit:CalendarExtender ID="Txt_Date_To_CalendarExtender" runat="server" Enabled="True" 
                 TargetControlID="Txt_Date_To">
            </ajaxToolkit:CalendarExtender>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Txt_Date_To" 
                 ErrorMessage="終了日付を入力して下さい"></asp:RequiredFieldValidator>
            <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Txt_Date_Fr" 
                 ControlToValidate="Txt_Date_To" ErrorMessage="日付範囲エラー" Operator="GreaterThanEqual" Type="Date">
            </asp:CompareValidator>
    <br />
            <asp:Button ID="Btn_OK" runat="server" Text="ＯＫ" />
      </div>
      </form>
    </body>
    -------------------------------------------------------------------------------------
    aspx.vb側
    -------------------------------------------------------------------------------------
    Protected Sub Btn_OK_Click(sender As Object, e As EventArgs) Handles Btn_OK.Click
            Response.Redirect("http://www.google.co.jp")
    End Sub
    -------------------------------------------------------------------------------------

    見づらくて申し訳ございません。

    なにかアドバイスございましたらお願いいたします。

        
    2013年7月26日 23:56
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > ToolKitはVSの管理ツールNuGetよりajax tool kitをインストールしました。

    自分は NuGet は使ったことはないので、自動的にきちんとセットアップしてくれるのかどうか分かりませんが、使用している .NET Framework のバージョンに合った最新版をダウンロードして、アプリケーションの Bin フォルダに dll を配置し、Visual Studio のツールボックスの設定までやってくれるのでしょうか？　確認してください。

    Toolkit の dll は .NET Framework のバージョンによって異なります。正しくインストールされていれば、アプリケーション直下の Bin フォルダに AjaxControlToolkit.dll というファイルがあるはずですので、そのファイルのプロパティからバージョンを確認してください。現時点での最新版は以下のページにあるように 7.0725 です。ファイルのプロパティを見ると、ASP.NET 3.5 用は 3.5.7.725、ASP.NET 4 用は 4.1.7.725 となっていると思います（未確認です。6 月リリースの 7.0607 はそのようになってました）。

    July 2013 Release
    http://ajaxcontroltoolkit.codeplex.com/releases/view/109918

    上記を確認後、Visual Studio のツールボックスに登録されてなければ、登録してください。以下のページの「3. Control Toolkitをツールボックスに登録する」が参考になると思います。

    ［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？
    http://www.atmarkit.co.jp/fdotnet/dotnettips/561aspajaxprepare/aspajaxprepare.html


    > ソースコードを添付させていただきます

    ざっと見た限りですが、以下の点が気になります。

    (1) ScriptManager ではなく、ToolkitScriptManager を使ってください。上記で、Visual Studio のツールボックスに正しく登録されれば、その中にあるはずです。

    (2) Btn_OK_Click メソッドでは、Page.IsValid で検証 OK か否かを判定し、OK の時のみリダイレクトするようにしてください（NG の時は何もしない）


    とりあえず上記のことをやってみて、それでもダメなら連絡ください。


    • 編集済み SurferOnWww 2013年7月27日 1:24 誤字訂正
    2013年7月27日 1:20
    |
  • Question
    サインインして投票
    0
    サインインして投票
    SurferOnWww様

    お休みにもかかわらず　早速ご回答頂き感謝いたします。

    Toolkit の バージョンは7.0607です。
    配置やwebconfigの書き換えはNuGetが自動で行ってくれます。
    ツールボックスの設定は手動で行いました。

    結論から言いますと
    Page.IsValid を記述する事で思うような動作が実現できました。
    （解決かどうかは　未熟なのでわかりません）

    ScriptManager 、ToolkitScriptManager どちらでも
    Page.IsValid を記述する事で　思うような動作が実現できました。
    Page.IsValidを記述しない場合は　ScriptManager 、ToolkitScriptManagerでも
    ボタンが押されたら　validateでとまらず　実行されました。

    ScriptManager 、ToolkitScriptManager どちらでもボタンが押されれば
    一旦クライアントから制御がはずれ　サーバーに処理が移ってると思われます。

    的確なアドバイスありがとうございました。大変勉強になりました。
    2013年7月27日 13:05
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > Page.IsValid を記述する事で思うような動作が実現できました。

    変ですね、ブラウザで JavaScript が無効になってなければ、クライアント側で JavaScript による検証が行われて、検証結果が NG ならポストバックされない（Btn_OK_Click メソッドには制御は飛ばない）はずです。

    Ajax Control Toolkit の CalendarExtender を追加するまでは期待通り動いたというのは間違いないですか？

    2013年7月27日 14:23
    |
  • Question
    サインインして投票
    0
    サインインして投票
    SurferOnWww様

    お休みにもかかわらず　早速ご回答頂き感謝いたします。

    >Ajax Control Toolkit の CalendarExtender を追加するまでは期待通り動いたというのは間違いないですか？

    おかしいなと思ったので
    Ajax Control Toolkit の CalendarExtenderを追加せずに　一旦テストしました。
    その場合は　TextBoxをタブで次の項目へ移動させても
    エラーネッセージが表示されました。
    当然Btn_OK_Clickは効きませんでした。

    If Page.IsValid Thenを記述しても
    タブでボタンまでは押せるところまでフォーカスは行きます。
    Ajax Control Toolkit の CalendarExtenderを追加していない時は
    タブでもエラー表示されました。

    If Page.IsValid Thenを記述した場合
    ボタンを押した後にエラー表示されます。

    不思議です。
    2013年7月28日 8:48
    |
  • Question
    サインインして投票
    0
    サインインして投票

    私のレスをよく読んでいただいているでしょうか？　レスの内容に不明な点があったら、質問してください。不明なまま進めていっても話が通じませんので。

    > ScriptManager 、ToolkitScriptManager どちらでも

    何故 ScriptManager にこだわるのですか？　特に理由がなければ、前のレスでも書きましたように、ScriptManager ではなく、ToolkitScriptManager を使ってください。特に ASP.NET 3.5 では ToolkitScriptManager は必須のはずです。

    次に、クライアント（ブラウザ）で起こっていることとサーバーで起こっていることの違いを理解してください。

    先の私のレス、

    > ブラウザで JavaScript が無効になってなければ、クライアント側で JavaScript
    > による検証が行われて、検証結果が NG ならポストバックされない（Btn_OK_Click
    > メソッドには制御は飛ばない）はずです。

    は 100% 理解されているでしょうか？　そうでなければ、クライアント/サーバーの区別がついていないと思います。このあたりの知識は Web アプリの開発には必須です。本を読んで勉強するなどして、知識をつけることをお勧めします。


    とりあえず直近のレスにある疑問に対して回答します。

    > Ajax Control Toolkit の CalendarExtenderを追加せずに　一旦テストしました。
    > その場合は　TextBoxをタブで次の項目へ移動させても
    > エラーネッセージが表示されました。
    > 当然Btn_OK_Clickは効きませんでした。

    Tab キーでフォーカスを移動させるだけでは検証はかかりません。なので、Tab キーの操作だけで「エラーネッセージが表示されました」ということはあり得ないはずです。そういう特殊なブラウザを使っていれば知りませんが、IE とか Firefox ですよね？　勘違いがありませんか？

    「エラーネッセージが表示されました」ということは、Button にフォーカスがあるとき Enter キーを押すか、マウスで Button をクリックして、検証がかかったからのはずです。違いますか？

    検証は、デフォルトでは、まずクライアント側でクライアントスクリプト（JavaScript）を使って行われます。（自分でスクリプトを書かなくても RequiredFieldValidator, CompareValidator コントロールが自動的に検証用のスクリプトを生成してブラウザに送信してくれます）。

    Button コントロールは html コードでは <input type="submit" ... /> なので、それをクリックすると通常はポストバックがかかります。しかし、Validator を Page に配置した場合、クライアントスクリプトで検証 NG の場合ポストバックはキャンセルされます。

    Btn_OK_Click メソッドはサーバー側で動く VB.NET のコードです。ポストバックされて初めてそれに制御が飛びます。検証結果が NG ではポストバックはキャンセルされるので、「当然Btn_OK_Clickは効きませんでした」ということになるのです。

    上記が理解できれば、

    > If Page.IsValid Thenを記述しても
    > タブでボタンまでは押せるところまでフォーカスは行きます。
    > Ajax Control Toolkit の CalendarExtenderを追加していない時は
    > タブでもエラー表示されました。
    >
    > If Page.IsValid Thenを記述した場合
    > ボタンを押した後にエラー表示されます。

    というのは、クライアント側で起こることとサーバー側で起こることの違いを理解してない、間違った理解いうことがわかると思います。


    • 編集済み SurferOnWww 2013年7月29日 3:07 誤字訂正
    2013年7月29日 3:06
    |
  • Question
    サインインして投票
    0
    サインインして投票
    SurferOnWww様

    丁寧な解説、ご回答感謝いたします。

    >何故 ScriptManager にこだわるのですか？　
    >特に理由がなければ、前のレスでも書きましたように、
    >ScriptManager ではなく、ToolkitScriptManager を使ってください。
    >特に ASP.NET 3.5 では ToolkitScriptManager は必須のはずです。

    特にこだわってる訳ではなく
    ToolkitScriptManagerの存在をしらなくて　最初に作成したアプリがScriptManager
    SurferOnWww様にご指摘していただき　再度作り直したアプリがToolkitScriptManager
    でしたので　どちらでもと言う紛らわしい表現になってしまいました。 

    SurferOnWww様のおっっしゃるとおり
    validationはBtn_OK_Clickなり　イベントが発生しないと
    実行されませんでした。
    （タブでは　エラー表示されません　失礼いたしました）

    >Button コントロールは html コードでは <input type="submit" ... /> なので、
    >それをクリックすると通常はポストバックがかかります。
    >しかし、Validator を Page に配置した場合、クライアントスクリプトで検証 NG の場合
    >ポストバックはキャンセルされます。

    これも簡単なプログラムで試して納得理解できました。

    しかし　ToolkitScriptManagerを配置しCalendarExtenderを１つでも設定すると
    ポストバックはキャンセルされず　実行されます。

    これも簡単なプログラムで　Btn_OK_Clickのイベント時に記述した aspx.vbが実行された事で
    確認できました。

    2013年7月30日 4:31
    |
  • Question
    サインインして投票
    0
    サインインして投票

    > しかし　ToolkitScriptManagerを配置しCalendarExtenderを１つでも設定すると
    > ポストバックはキャンセルされず　実行されます。

    当方ではそのようなことは起こっていません。

    先のレスで「実際にコードを書いて検証してみました。」と書きましたが、そのコードをアップしておきますので試してみてください。

    CompareValidator を両方の TextBox に使っている点に注意してください。その理由は、片方だけだと、ControlToCompare とした TextBox の入力形式が不正の時は検証 NG とならないからです。質問者さんのコードがうまくいかないのは、そのあたりが原因の一つかもしれません。

    <%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            Label1.Text = "Page is valid";
        }
        else
        {
            Label1.Text = "Page is NOT valid";
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        string csname = "OnSubmitScript";
        Type cstype = this.GetType();
        ClientScriptManager cs = Page.ClientScript;
        if (!cs.IsOnSubmitStatementRegistered(cstype, csname))
        {
            String cstext = "OnUpdateValidators();";
            cs.RegisterOnSubmitStatement(cstype, csname, cstext);
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
    //<![CDATA[
            function OnUpdateValidators() {
                var msg = "Validation Results:\n";
                for (var i = 0; i < Page_Validators.length; i++) {
                    var val = Page_Validators[i];
                    var ctrl = document.getElementById(val.controltovalidate);
                    if (ctrl != null) {
                        if (!val.isvalid) {
                            msg += ctrl.id + ", value: " + ctrl.value + ", is NOT valid\n";
                        }
                        else {
                            msg += ctrl.id + ", value: " + ctrl.value + ", is valid.\n";
                        }
                    }
                }
                alert(msg);
            }
    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" 
        EnableScriptGlobalization="true">
    </asp:ToolkitScriptManager>
    <div>
        開始日：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox1" Format="yyyy/MM/dd" 
            DaysModeTitleFormat="yyyy年M月" TodaysDateFormat="yyyy年M月d日">
        </asp:CalendarExtender>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ErrorMessage="開始日の入力がない。" ControlToValidate="TextBox1" 
            ForeColor="Red"></asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator1" runat="server" 
            ErrorMessage="開始日入力の形式が不正、もしくは開始日 > 終了日。" 
            ControlToCompare="TextBox2" 
            ControlToValidate="TextBox1" ForeColor="Red" 
            Operator="LessThanEqual" Type="Date"></asp:CompareValidator>
        <br />
        終了日：<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="TextBox2_CalendarExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox2" Format="yyyy/MM/dd" 
            DaysModeTitleFormat="yyyy年M月" TodaysDateFormat="yyyy年M月d日">
        </asp:CalendarExtender>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
            ErrorMessage="終了日の入力がない。" ControlToValidate="TextBox2" 
            ForeColor="Red"></asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server" 
            ErrorMessage="終了日入力の形式が不正、もしくは開始日 > 終了日。" 
            ControlToCompare="TextBox1" 
            ControlToValidate="TextBox2" ForeColor="Red" 
            Operator="GreaterThanEqual" Type="Date"></asp:CompareValidator>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
    </div>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>

    ＜追伸＞

    当方の環境は、Windows Vista Ultimate SP2, Visual Studio 2010 Pro, IIS7, ASP.NET 4, AjaxControlToolkit.dll 4.1.7.607 です。ブラウザは IE9, Firefox 22.0 で検証しました。


    • 編集済み SurferOnWww 2013年7月30日 9:38 追伸追加
    2013年7月30日 9:09
    |
  • Question
    サインインして投票
    0
    サインインして投票

    先のレスで書いたコードをサーバーにアップしておきました。URL は下記の通りです。よろしければ試してみてください。ただし、サーバーは Windows Server 2008, IIS7, ASP.NET 3.5, AjaxControlToolkit.dll 3.5.51116.0 です。

    http://surferonwww.info/Test/0008-ACTCalendarAndValidator.aspx

    2013年7月30日 13:48
    |
  • Question
    サインインして投票
    0
    サインインして投票
    SurferOnWww様

    丁寧に対応していただきありがとうございました。
    サンプルコードまで記載していただき感謝いたします。
    じっくり読ませていただき学習させていただきます。

    取り急ぎお礼まで。
    2013年7月30日 13:55
    |