Javascript 无回发的textbox上的ASP.NET客户端验证

我正在使用ASP.NET，希望在客户端执行以下操作，因为我不希望重新加载页面（不希望回发）。我想在以下条件下检查用户输入：

有2个单选按钮、2个文本框和1个按钮。大概是这样的：

用户必须勾选单选按钮才能激活文本框（默认情况下，文本框处于禁用状态）

如果用户勾选单选按钮1，则textbox1将被激活，textbox2将为空并被禁用，如果用户按下该按钮且textbox1为空，则消息1将被激活

第二个单选按钮和文本框2也是如此

编辑 我注意到我的按钮在

中，而不是

您可以尝试：

<asp:button onClientClick="return validateData();">

return true
将使您的页面发回服务器，
return false
将阻止您的页面发回服务器。希望这对您有所帮助。
您应该使用jquery实现以下目的：

<script>
    $(document).ready(function () {
        var Error = false;
        $("#RadioButton1").click(function () {
            $("#TextBox2").attr("disabled", "disabled");
            $("#TextBox1").removeAttr("disabled");
        });
        $("#RadioButton2").click(function () {
            $("#TextBox1").attr("disabled", "disabled");
            $("#TextBox2").removeAttr("disabled");
        });
        $("#Button1").click(function () {
            var TextBox1value = $("#TextBox1").val();
            var TextBox2value = $("#TextBox2").val();
            var TextBox1Disable = $("#TextBox1").attr("disabled");
            var TextBox2Disable = $("#TextBox2").attr("disabled");

            if ((TextBox1value == "") && TextBox1Disable != "disabled") {
                $("#Label1").text("text can not be empty");
                Error = true;
            }
            if ((TextBox2value == "") && TextBox2Disable != "disabled") {
                $("#Label2").text("text can not be empty");
                Error = true;
            }

        });


        $("#form1").submit(function (e) {
            if (Error) {
                alert("there are Some validation error in your page...!");
                e.preventDefault();
            }

        });

    });
</script>


$（文档）.ready（函数（）{
var错误=错误；
$（“#RadioButton1”）。单击（函数（）{
$（“#TextBox2”）.attr（“禁用”、“禁用”）；
$（“#TextBox1”）.removeAttr（“禁用”）；
});
$（“#RadioButton2”）。单击（函数（）{
$（“#TextBox1”）.attr（“禁用”、“禁用”）；
$（“#TextBox2”）.removeAttr（“禁用”）；
});
$（“#按钮1”）。单击（函数（）{
var TextBox1value=$（“#TextBox1”）.val（）；
var TextBox2value=$（“#TextBox2”）.val（）；
var TextBox1Disable=$（“#TextBox1”）.attr（“禁用”）；
var TextBox2Disable=$（“#TextBox2”）.attr（“禁用”）；
如果（（TextBox1value==“”）和&TextBox1Disable！=“disabled”）{
$（“#Label1”）.text（“文本不能为空”）；
错误=真；
}
如果（（TextBox2value==“”）和&TextBox2Disable！=“disabled”）{
$（“#Label2”）.text（“文本不能为空”）；
错误=真；
}
});
$（“#表格1”）。提交（功能（e）{
如果（错误）{
警告（“您的页面中有一些验证错误…！”；
e、 预防默认值（）；
}
});
});

主体要素包括：

<form id="form1" runat="server">
    <div>
    </div>
    <asp:RadioButton ID="RadioButton1" runat="server" GroupName="g1" /><asp:TextBox ID="TextBox1" runat="server" Enabled="False"></asp:TextBox><asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
    <br />
    <asp:RadioButton ID="RadioButton2" runat="server" GroupName="g1" /><asp:TextBox ID="TextBox2" runat="server" Enabled="False"></asp:TextBox><asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>






在处理验证时，我会使用ASP.net自定义验证程序，并使用jquery来辅助客户端验证：

ASP.net aspx

<form id="form1" runat="server">
    <div>
        <div id="requiedCheck1" class="check">
           <asp:RadioButton ID="radio1" runat="server" GroupName="myGroup" />
           <asp:TextBox ID="text1" runat="server" Disabled="true"></asp:TextBox>
           <asp:CustomValidator
               ID="val1" runat="server" ErrorMessage="Please Enter Text" ClientValidationFunction="ValidateSomething" ControlToValidate="text1" ValidateEmptyText="true" ></asp:CustomValidator>
        </div>
        <div id="requiedCheck2" class="check">
           <asp:RadioButton ID="radio2" runat="server" GroupName="myGroup" />
           <asp:TextBox ID="text2" runat="server" Disabled="true"></asp:TextBox>
           <asp:CustomValidator
               ID="CustomValidator1" runat="server" ErrorMessage="Please Enter Text" ClientValidationFunction="ValidateSomething" ControlToValidate="text2" ValidateEmptyText="true"></asp:CustomValidator>
        </div>
        <asp:button ID="Button1" runat="server" text="Button" />

    </div>
</form>

我还将添加一个服务器端验证方法

如果你想变得非常花哨，你也应该能够连接单选按钮。这将在选中单选按钮时触发验证

$(document).ready(function () {

    //Wire up the radio buttons to trigger validation this is optional
    $(".check input:radio").each(function () {
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val1.ClientID %>"));
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val2.ClientID %>"));
    }); 

    //jquery to change the disabled state
    $(".check :radio").click(function(){
        var parDiv = $(this).parent(".check"); //get parent div
        //empty text and set all to disabled
        $(".check input:text").val("").prop("disabled", true);

        //set target to enabled
        $(parDiv).find("input:text").prop("disabled", false);
     });           
});

$（文档）.ready（函数（）{
//连接单选按钮以触发验证这是可选的
$（“。检查输入：收音机”）。每个（函数（）{
ValidatorHookupControlID（$（this）.attr（'id'），document.getElementById（“”）；
ValidatorHookupControlID（$（this）.attr（'id'），document.getElementById（“”）；
}); 
//jquery更改禁用状态
$（“.check:radio”）。单击（函数（）{
var parDiv=$（this.parent（“.check”）；//获取父div
//空文本并将所有设置为禁用
$（“.check输入：text”）.val（“”）.prop（“禁用”，true）；
//将目标设置为启用
$（parDiv）.find（“输入：文本”）.prop（“禁用”，false）；
});           
});

我添加了jQuery javascript来切换文本框的禁用状态。您可以在此处看到切换操作：
在按钮控件中，只需添加以下代码段：

OnClientClick="if(Page_ClientValidate(ValidateSomething)){this.disabled=true;}"

检查此链接是否将validationgroup添加到您的验证器以及您试图用作检查验证的触发器的按钮

一旦掌握了验证组的诀窍，它们就非常容易使用。我不会深入讨论关于验证器的太多细节，但是如果这些信息对我有帮助的话，我可以随时将其添加到帖子中。希望你已经解决了你的答案
 你能给我提供代码吗？我的按钮不是@tansiongz。我想问题是：“我如何只验证与所选单选按钮关联的文本框？”，对吗？@MiguelAngelo是的，绝对正确。那么我需要改变我的头衔吗？我认为这是个好主意。。。因为人们理解了一些其他的东西，正如你在前面的评论中所看到的。。。或者你可以在问题本身中解释这一点，让它更清楚。
$(document).ready(function () {

    //Wire up the radio buttons to trigger validation this is optional
    $(".check input:radio").each(function () {
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val1.ClientID %>"));
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val2.ClientID %>"));
    }); 

    //jquery to change the disabled state
    $(".check :radio").click(function(){
        var parDiv = $(this).parent(".check"); //get parent div
        //empty text and set all to disabled
        $(".check input:text").val("").prop("disabled", true);

        //set target to enabled
        $(parDiv).find("input:text").prop("disabled", false);
     });           
});

OnClientClick="if(Page_ClientValidate(ValidateSomething)){this.disabled=true;}"