Cambiar la clase css de textbox cuando la validación de ASP.NET falla

Question

¿Cómo puedo ejecutar algunos javascript cuando un validador de campo obligatorio adjuntado a un cuadro de texto falla la validación del lado del cliente? Lo que intento hacer es cambiar la clase css del cuadro de texto, para hacer que el borde del cuadro de texto se muestre en rojo.

Estoy usando formularios web y tengo la biblioteca jquery a mi disposición.

Answer 1

Aquí es rápido y algo sucio (pero funciona!)

<form id="form1" runat="server"> 
     <asp:TextBox ID="txtOne" runat="server" /> 
     <asp:RequiredFieldValidator ID="rfv" runat="server" 
           ControlToValidate="txtOne" Text="SomeText 1" /> 
     <asp:TextBox ID="txtTwo" runat="server" /> 
     <asp:RequiredFieldValidator ID="rfv2" runat="server" 
           ControlToValidate="txtTwo" Text="SomeText 2" /> 
     <asp:Button ID="btnOne" runat="server" OnClientClick="return BtnClick();" 
             Text="Click" CausesValidation="true" /> 
    </form> 
    <script type="text/javascript"> 
     function BtnClick() { 
      //var v1 = "#<%= rfv.ClientID %>"; 
      //var v2 = "#<%= rfv2.ClientID %>"; 
      var val = Page_ClientValidate(); 
      if (!val) { 
       var i = 0; 
       for (; i < Page_Validators.length; i++) { 
        if (!Page_Validators[i].isvalid) { 
         $("#" + Page_Validators[i].controltovalidate) 
         .css("background-color", "red"); 
        } 
       } 
      }    
      return val; 
     } 
    </script> 

Answer 2

Creo que le conviene usar un Custom Validator y luego usar la ClientValidationFunction ... A menos que agregue una clase css al error.

Answer 3

Como alternativa, sólo iterar a través de los controles de página de la siguiente manera: (Necesita una travesía por referencia System.Collections.Generic)

const string CSSCLASS = " error";  

protected static Control FindControlIterative(Control root, string id) 
{ 
    Control ctl = root; 
    LinkedList<Control> ctls = new LinkedList<Control>(); 
    while (ctl != null) 
    { 
    if (ctl.ID == id) return ctl; 
    foreach (Control child in ctl.Controls) 
    { 
     if (child.ID == id) return child; 
     if (child.HasControls()) ctls.AddLast(child); 
    } 
    ctl = ctls.First.Value; 
    ctls.Remove(ctl); 
    } 
    return null; 
} 



protected void Page_PreRender(object sender, EventArgs e) 
{ 
    //Add css classes to invalid items 
    if (Page.IsPostBack && !Page.IsValid) 
    { 
    foreach (BaseValidator item in Page.Validators) 
    { 
     var ctrltoVal = (WebControl)FindControlIterative(Page.Form, item.ControlToValidate); 
     if (!item.IsValid) ctrltoVal.CssClass += " N"; 
     else ctrltoVal.CssClass.Replace(" N", ""); 
    } 
    } 
} 

Debería funcionar para la mayoría de los casos, y significa que no tiene que actualizarlo cuando agrega validadores. He añadido este código a una clase de página cstom para que se ejecute en todo el sitio en cualquier página en la que haya agregado validadores.

Answer 4

Hace un tiempo que pasé unas horas en él y desde entonces he estado usando magia js personalizada para lograr esto.

De hecho, es bastante simple y en la forma en que funciona la validación de ASP.NET. La idea básica es agregar una clase css para adjuntar un evento de javascript en cada control que desee una respuesta visual rápida.

<script type="text/javascript" language="javascript"> 
    /* Color ASP NET validation */ 
    function validateColor(obj) { 
     var valid = obj.Validators; 
     var isValid = true; 

     for (i in valid) 
       if (!valid[i].isvalid) 
        isValid = false; 

     if (!isValid) 
      $(obj).addClass('novalid', 1000); 
     else 
      $(obj).removeClass('novalid', 1000); 
    } 

    $(document).ready(function() { 
     $(".validateColor").change(function() {validateColor(this);}); 
    }); 
</script> 

Por ejemplo, ese será el código que se agregará en un control de cuadro de texto ASP.Net. Sí, puedes poner tantos como quieras y solo implica agregar un valor de CssClass.

<asp:TextBox ID="txtBxEmail" runat="server" CssClass="validateColor" /> 

lo que hace es activar la validación del lado del cliente ASP.Net cuando hay un cambio en el control de trabajo y aplicar una clase CSS si no es válido. Entonces, para personalizar la visualización, puede confiar en css.

.novalid { 
    border: 2px solid #D00000; 
} 

No es perfecto, pero casi :) y al menos su código no sufrirá de material extra. Y el mejor, funciona con todo tipo de validadores Asp.Net, eventos personalizados.

No he visto algo como esto en Google, así que quiero compartir mi truco contigo. Espero eso ayude.

material extra en el lado del servidor:

Después de algún tiempo el uso de este también añadir esta clase css ".novalid" de código detrás cuando necesita algo de validación particular sobre las cosas que tal vez podría ser solamente comprueba en el lado del servidor de esta manera:

Page.Validate(); 
    if (!requiredFecha.IsValid || !CustomValidateFecha.IsValid) 
     txtFecha.CssClass = "validateColor novalid"; 
    else 
     txtFecha.CssClass = "validateColor"; 

Answer 5

Aquí está mi solución.

Las ventajas sobre otras soluciones:

• se integra perfectamente con ASP.NET - sin necesidad de cambios en el código. Simplemente llame al método en la carga de la página en una página maestra.
• cambia automáticamente la clase CSS cuando el cuadro de texto o el control cambia

Desventajas:

• utiliza algunas características internas de ASP.NET código JavaScript
• Probado sólo en ASP.NET 4.0

Modo de empleo

• Requiere jQuery
• Llame a la función "Validation_Load" cuando se carga la página

• declarar una "control_validation_error" clase CSS

  function Validation_Load() { 
  if (typeof (Page_Validators) != "object") { 
      return; 
  } 
  
  for (var i = 0; i < Page_Validators.length; i++) { 
      var val = Page_Validators[i]; 
      var control = $("#" + val.controltovalidate); 
      if (control.length > 0) { 
       var tagName = control[0].tagName; 
       if (tagName != "INPUT" && tagName != "TEXTAREA" && tagName != "SELECT") { 
        // Validate sub controls 
       } 
       else { 
        // Validate the control 
        control.change(function() { 
         var validators = this.Validators; 
         if (typeof (validators) == "object") { 
          var isvalid = true; 
          for (var k = 0; k < validators.length; k++) { 
           var val = validators[k]; 
           if (val.isvalid != true) { 
            isvalid = false; 
            break; 
           } 
          } 
          if (isvalid == true) { 
           // Clear the error 
           $(this).removeClass("control_validation_error"); 
          } 
          else { 
           // Show the error 
           $(this).addClass("control_validation_error"); 
          } 
         } 
        }); 
       } 
      } 
  } 
  } 
  

Answer 6

podría utilizar el siguiente script:

<script> 

    $(function(){ 
     if (typeof ValidatorUpdateDisplay != 'undefined') { 
      var originalValidatorUpdateDisplay = ValidatorUpdateDisplay; 

      ValidatorUpdateDisplay = function (val) { 
       if (!val.isvalid) { 
        $("#" + val.controltovalidate).css("border", "2px solid red"); 
       } 

       originalValidatorUpdateDisplay(val); 
      } 
     } 
    }); 

</script> 

Este código decora la función original ValidatorUpdateDisplay respon sible para actualizar la visualización de sus validadores, actualizando el control para validar según sea necesario.

Espero que esto ayude,