ASP.NET client side check for text field without postback

Question

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

• There are 2 radio exchanges and 2 text fields and 1 button. Something like that:
• The user must check the box to activate the text field (text fields are disabled by default)
• If the user selects checkbox 1, text box 1 will be activated, and text box 2 will be blank and disabled, if the user clicks the button, and text box 1 will be blank, message 1 is activated.
• The same goes for the second radio and text field2.

Edit

I noticed that my button is located in <asp:button> , and not <input type="submit> , so it will run my code for validation on the server. Correct me if I am wrong. So, how do I force <asp:button> check user input without having to transfer the server?

Answer 1

You can try:

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

And in JavaScript it should be:

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

return true will cause your page to be sent to the server, and return false prevent your page from doing so. Hope this helps.

Answer 2

When processing validation, I would use ASP.net custom validators and use jquery for assis with 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> 

Please note that I set ValidateEmptyText to true .

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.

If you want to get really fantasy, you can also connect radio buttons. This will start the test when checking the radio volumes.

 $(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 added javascript jQuery to switch the state of disabled text fields. You can see the switch in action here: http://jsfiddle.net/cVACb/

Answer 3

you should use jquery for your purpose:

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

Body Elements:

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

Answer 4

In the button control panel, simply add the following snippet:

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

Check this link to asp.net Disable button after click, while maintaining CausesValidation and OnClick-Method

Answer 5

Would add a validation group to your validator, as well as a button, where are you trying to use as a trigger for validation validation?

Verification groups are really easy to use as soon as you hang them. I will not dive into too many details about validators, but if the information was useful, I can always add it to the message. I hope you decide to answer.