ASP.NET Client-side validation on textbox without postback

Question

I am using ASP.NET and would like to do the following on client side because I do not want the page to reload (do not want postback). I would like to check for user input with following conditions:

1. There are 2 radiobuttons and 2 textboxes and 1 button. Something like this:
2. User must tick the radiobutton in order to activate the textbox (textboxes by default is disabled)
3. If user tick radiobutton 1, textbox1 will be activated and textbox2 will be empty and disabled, if user press the button and textbox1 is empty message1 will activate.
4. Same goes to the second radiobutton and textbox2.

Edit

I noticed that my button is in <asp:button> and not <input type="submit> therefore it will run my code behind to valdiate at server. Correct me if I am wrong. So how do I make my <asp:button> to validate user input without have to pass to server?

Answer 1

Handling the validation, I would use ASP.net custom validators and use jquery to assis with the client side validation:

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>

Note that I have set ValidateEmptyText to true.

js Validation function

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

    }

I would also add a server-side validation method too.

If you want to get really fancy you should be able to wire up the radio buttons too. This will fire the validation when the radiobuttons are checked

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

I've added the jQuery javascript to toggle the disabled state of the text boxes. You can see the toggle in action here: http://jsfiddle.net/cVACb/

Answer 2

You can try:

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

And in the JavaScript it should be:

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

return true will make your page be posted back to the server, and return false will prevent your page from doing that. Hope this helps.