ASP.NET文本框客户端验证无需回发页面

Question

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

1. 有两个单选按钮，两个文本框和一个按钮。类似于这样：
2. 用户必须勾选单选按钮才能激活文本框（默认情况下，文本框是禁用的）
3. 如果用户选择单选按钮1，则将激活文本框1，并将文本框2清空并禁用，如果用户按按钮并且文本框1为空，则会激活message1。
4. 同样适用于第二个单选按钮和文本框2。

编辑

我注意到我的按钮在<asp：button>而不是<input type =“submit”>中，因此它将在服务器上运行我的代码验证。如果我错了，请纠正我。那么如何使我的<asp：button>在不必传递到服务器的情况下验证用户输入？

- 4 Leave Cover

---

你能提供给我代码吗？ - 4 Leave Cover

@TanSiongZhe 我认为问题是：“我如何仅验证与所选单选按钮相关联的文本框？”我正确吗？ - Miguel Angelo

@MiguelAngelo 是的，绝对没错。那我需要改变我的标题吗？ - 4 Leave Cover

我已经修改了。希望能尽快得到一些反馈 :) - 4 Leave Cover

@JonP 是的，我想要在客户端上同时实现这两个功能，但不希望使用postback，因为它会刷新我的页面。 - 4 Leave Cover

Answer 1

你可以尝试：

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

在 JavaScript 中应该这样写：

function validateData() {
    if (OK) {
        return true;
    } else {
        return false;
    }
}

return true会使你的页面回传到服务器，而return false则会阻止页面这样做。希望这可以帮助你。

- Phong Vo

Answer 2

处理验证时，我会使用 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>

请注意，我已将ValidateEmptyText设置为true。 JS验证函数

function ValidateSomething(sender, args) {

        args.IsValid = false;
        var parentDiv = $(sender).parent(".check");

        var radioChecked = $(parentDiv).find("input:radio").is(":checked");
        var hasText = $(parentDiv).find("input:text").val().length > 0;



        if (radioChecked) {
            args.IsValid = hasText;
        } else {
            args.IsValid = true;
        }

    }

我还建议加上一个服务器端验证方法。

如果你想变得更加高级，应该能够连接单选按钮。这将在选择单选按钮时触发验证。

$(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);
     });           
});

我已经添加了jQuery JavaScript来切换文本框的禁用状态。您可以在这里看到切换效果：http://jsfiddle.net/cVACb/

- Jon P

Answer 3

你应该使用 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>

主体元素为：

<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>

- Mahdi jokar

Answer 4

在您的按钮控件中，只需添加以下代码片段：

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

请查看此链接asp.net在保持CausesValidation和OnClick-Method的情况下禁用按钮单击

- Ajay

Answer 5

如果你给验证器和按钮都添加了验证组，那么这个按钮就可以作为触发器来检查验证了吗？

一旦你掌握了验证组的使用方法，它们就非常容易使用。我不会深入详细讲解验证器，但如果信息有用的话，我随时可以将其添加到帖子中。希望你已经解决了问题。

- Eric