Validación del lado del cliente ASP.NET en el textbox sin devolución de datos

Estoy usando ASP.NET y me gustaría hacer lo siguiente en el lado del cliente porque no quiero que la página se vuelva a cargar (no quiero la devolución de datos). Me gustaría verificar la input del usuario con las siguientes condiciones:

  1. Hay 2 botones de radio y 2 cuadros de text y 1 button. Algo como esto: enter image description here
  2. El usuario debe marcar el button de radio para activar el textbox (los cuadros de text por defecto están deshabilitados)
  3. Si el usuario marca el button de radio 1, se activará el textbox1 y el textbox2 estará vacío y deshabilitado, si el usuario presiona el button y el textbox1 está vacío, se activará el post1.
  4. Lo mismo pasa con el segundo button de radio y el textbox2.

Editar

Noté que mi button está en <asp:button> y no en <input type="submit> por lo tanto, ejecutaré mi código para valdiate en el server. Corrígeme si me equivoco. Entonces, ¿cómo hago mi <asp:button> para validar la input del usuario sin tener que pasar al server?

Puedes probar:

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

Y en el JavaScript debería ser:

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

return true hará que su página se publique nuevamente en el server, y el resultado return false evitará que su página lo haga. Espero que esto ayude.

Manejando la validation, usaría validadores personalizados ASP.net y usaré jquery para ayudar con la validation del lado del cliente:

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> 

Tenga en count que he configurado ValidateEmptyText en true .

js function de validation

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

También agregaría un método de validation del lado del server también.

Si quieres ser realmente elegante, también deberías poder conectar los botones de radio. Esto disparará la validation cuando se verifiquen los botones de radio

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

Agregué el Javascript de jQuery para alternar el estado deshabilitado de los cuadros de text. Puede ver el cambio en acción aquí: http://jsfiddle.net/cVACb/

debe usar jquery para su propósito:

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

los elementos del cuerpo son:

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

En el control de tu button, simplemente agrega el siguiente fragment:

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

Verifique este enlace asp.net Desactive el button después de hacer clic mientras mantiene CausesValidation y un método OnClick

¿Agregaría un grupo de validation a su validador, así como también el button que intenta usar como activador para verificar la validation?

Los grupos de validation son realmente fáciles de usar una vez que los domina. No profundizaré en demasiados detalles sobre los validadores, pero si la información es útil, siempre puedo agregarla a la publicación. Espero que hayas resuelto tu respuesta.