Howto hacer RequiredFieldValidator cambiar la clase css de la div padre

Question

Tengo un elemento de entrada de cuadro de texto que tiene un RequiredFieldValidator como tal:

<div> 
    <label>First name</label> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator> 
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox> 
</div> 

Cuando el cuadro de texto está vacío en enviar Quiero añadir la clase 'forma- error 'a la Div principal:

<div class="form-error"> 
    <label>First name</label> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator> 
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox> 
</div> 

¿Es esto posible y, de ser así, cómo lo hago?

Answer 1

con RequiredFieldValidator no puede agregar su código personalizado.

debe usar asp.net customvalidator control, y escriba su propia función de validación javascript que establece la clase en el div.

Answer 2

Creo que la siguiente opción te puede resultar útil. Básicamente, anula uno de los scripts de validación de ASP.NET. Y le agrega algo de lógica para agregar/eliminar la clase de error en div principal.

El problema que tuve que enfrentar con esta tarea fue hacer que mi script se ejecutara después de que se activaron las validaciones ya que el DOM no se vuelve a cargar. Al reemplazar este el script de validación original, tiene la capacidad de ejecutar su propio script cuando se actualiza la pantalla de validación.

De esta forma puede seguir utilizando sus otros controles de validación. Tienes que colocar la secuencia de comandos en la parte inferior de tu página o página maestra. También utilicé JQuery para simplificar las cosas.

* Tenga en cuenta que el código siguiente requiere que los validadores estén configurados para mostrar dinámicos. Si no desea que sean visibles, puede agregar una clase css y establecer la visualización: ninguna.

<script type="text/javascript"> 
    function ValidatorUpdateDisplay(val) { 
     if (typeof (val.display) == "string") { 
      if (val.display == "None") { 
       return; 
      } 
      if (val.display == "Dynamic") { 
       val.style.display = val.isvalid ? "none" : "inline"; 
       return; 
      } 
     } 
     if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1)) { 
      val.style.display = "inline"; 
     } 
     val.style.visibility = val.isvalid ? "hidden" : "visible"; 


     //--- Add/Remove Error Class 
     var triggeredSiblings = 0; 
     if (val.isvalid) { 
      $(val).siblings('span').each(function() { 
       if ($(this).isvalid == false) { triggeredSiblings = 1; } 
      }); 
      if (triggeredSiblings == 0) { $(val).closest("div").removeClass("error"); } 
     } else { 
      $(val).closest("div").addClass("error"); 
     } 
    } 
</script> 

Answer 3

utilizar lo siguiente:

<script> 

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

      ValidatorUpdateDisplay = function (val) { 
       if (!val.isvalid) { 
        $("#" + val.controltovalidate).closest("div").addClass("form-error"); 
       } 

       originalValidatorUpdateDisplay(val); 
      } 
     } 
    }); 

</script> 

Este código decora la función original de ValidatorUpdateDisplay responsable de actualizar la visualización de los validadores, la actualización del ControlToValidate div más cercano.