ラジオボタンとドロップダウンリストをクライアントサイドで検証する方法

前提・実現したいこと

ASP.NET、CustomValidatorを用いて、RadioButton1とDropDownList1のIndex0が選択されている時、エラーメッセージを出したいと思っています。調べながら書いてはみましたがうまく動かず、どのようにしたら動くようになるのか、ご教示いただけますでしょうか。
EnableClientScriptプロパティはtrueです。

該当のソースコード

★クライアント側検証
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="おためし.WebForm1" %>

<!DOCTYPE html>

<html xmlns="****">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script type="text/javascript">
        function check(sender, e) {
            radio = document.getElementById('<%= RadioButton1.ClientID%>');
            drop = document.getElementById('<%= DropDownList1.ClientID%>');
            if (radio.Checked == true && drop.SelectedIndex == 0) {
                e.IsValid = false;
            }
            else {
                e.IsValid = true;
            }
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" OnServerValidate="CustomValidator1_ServerValidate" ClientValidationFunction="check"></asp:CustomValidator>
        </div>
        <asp:RadioButton ID="RadioButton1" runat="server" GroupName="radio" />
        <asp:RadioButton ID="RadioButton2" runat="server" GroupName="radio" />
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>0</asp:ListItem>
            <asp:ListItem>1</asp:ListItem>
        </asp:DropDownList>
    </form>
</body>
</html>

★サーバー側検証
namespace おためし
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
        {
            if(RadioButton1.Checked == true && DropDownList1.SelectedIndex == 0)
            {
                args.IsValid = false;
            }
            else
            {
                args.IsValid = true;
            }
        }
    }
}

補足情報（FW/ツールのバージョンなど）

ASP.NET
Visual Studio2019
C#
.NET Framework4.8

退会済みユーザー

2020/06/23 04:22 編集

サーバー側の判定条件、 RadioButton1.Checked == true && DropDownList1.SelectedIndex == 0 がちょっと変なような気がするのですが、それはともかく、全く同じ条件（RadioButton1 にチェックが入っていて、かつ、DropDownList の最初の項目が選択されている場合は検証 NG その他は検証 OK）でクライアント側も判定すればいいのですか？

退会済みユーザー

2020/06/23 06:00

返信遅くなり申し訳ございません。はい。その通りです。

行動規範の内容に同意します

回答1件

ベストアンサー

質問のコメントに対する返事がないですが、サーバー側の判定条件、

RadioButton1.Checked == true && DropDownList1.SelectedIndex == 0

と同じ条件、即ち「RadioButton1 にチェックが入っていて、かつ、DropDownList1 の最初の項目 asp:ListItem0</asp:ListItem> が選択されている場合は検証 NG その他は検証 OK」でクライアント側も判定するとして回答します。

DropDownList1 の選択の　JavaScript による判定条件 drop.SelectedIndex == 0 が無効なので期待した結果が得られないのであろうと思います。drop.value == "0" とすればよさそうです。全体的には以下のようにして試してみてください。

<script type="text/javascript">
//<![CDATA[
    
    function check(sender, args) {
        var radio = document.getElementById('<%= RadioButton1.ClientID%>');
        var drop = document.getElementById('<%= DropDownList1.ClientID%>');

        if (radio.checked == true && drop.value == "0") {
            args.IsValid = false;
        } else {
            args.IsValid = true
        }            
    }

//]]>
</script>

あと、submit しないと検証がかからないので、Button を配置してクリックして検証するようにしてください。

ブラウザのデバッガを使うことをお勧めします。Chrome の場合は以下のようにできます。

投稿2020/06/23 05:18

退会済みユーザー

総合スコア0

退会済みユーザー

2020/06/23 06:11

ありがとうございます。ご指摘いただいた箇所を修正したところ動作しました。ちなみにこちら、ラジオボタンやドロップダウンリストからフォーカス（カーソル？）が外れたタイミングで検証することは可能なのでしょうか？

退会済みユーザー

2020/06/23 07:21

> ラジオボタンやドロップダウンリストからフォーカス（カーソル？）が外れたタイミングで検証することは可能なのでしょうか？ TextBox + RequiredFieldValidator や RegularExpressionValidator の組み合わせなら、クライアント側では TextBox が html に変換された input type="text" 要素の change イベントで検証がかかるようになっていますが、DropDownList + CustomValidator や RadioButton + CustomValidator ではそういう仕組みはないのでダメでしょう。設定の変更で何とかできるものではなさそうで、検証用のスクリプトライブラリを書き換える必要があると思います。

退会済みユーザー

2020/06/23 07:41

なるほど。大変よく分かりました。ありがとうございました。

退会済みユーザー

2020/06/23 09:36

一つ見落としていました。DropDownList は html に変換されると select 要素になり、それは change イベントを持っていますので、CustomValidator の ControlToValidate プロパティを DropDownList の ID に設定しておけば、選択の変更で（フォーカス外れではありませんが）クライアント側での検証は動きます。RadioButton はダメですが・・・

退会済みユーザー

2020/06/23 11:51

コメントありがとうございます。changeイベントは、ネットで調べていく中で目にしていた単語ではあったのですがそういうことだったのですね。コーディングしてみて動きを確認してみたいと思います。

行動規範の内容に同意します