¿Puede obtener una validación de JavaScript personalizada del lado del cliente para los validadores estándar de formularios web de ASP.NET?

Question

¿Puede obtener una validación de JavaScript personalizada en el lado del cliente para los validadores de formularios web estándar de ASP.NET?

Por ejemplo, use un asp: RequiredFieldValidator deje el código del lado del servidor solo, pero implemente su propia notificación al cliente utilizando jQuery para resaltar el campo o el color de fondo, por ejemplo.

Answer 1

El estándar CustomValidator tiene una propiedad ClientValidationFunction para ello:

<asp:CustomValidator ControlToValidate="Text1" 
        ClientValidationFunction="onValidate" /> 

<script type='text/javascript'> 
function onValidate(validatorSpan, eventArgs) 
{ eventArgs.IsValid = (eventArgs.Value.length > 0); 
    if (!eventArgs.IsValid) highlight(validatorSpan); 
} 
</script> 

Answer 2

Lo que puede hacer es enganchar en el validador y asignar un nuevo método de evaluar, de esta manera:

<script type="text/javascript"> 
     rfv.evaluationfunction = validator; 

     function validator(sender, e) { 
      alert('rawr'); 
     } 
    </script> 

RFV es el ID de mi validador campo obligatorio. Tienes que hacer esto en la parte inferior de la página para que se lo asigne después de que se haya registrado javascript para el validador.

Es mucho más fácil usar CustomFieldValidator y asignar su propiedad de validación del lado del cliente.

<asp:CustomValidator ControlToValidate="txtBox" ClientValidationFunction="onValidate" /> 

<script type='text/javascript'> 
function onValidate(sender, e) 
{ 
    alert('do validation'); 
} 
</script> 

Mira la documentación here y here.

Answer 3

Sí, lo he hecho. Utilicé Firebug para descubrir las funciones Dot.Net JS y luego secuestré las funciones del validador

Lo siguiente se aplicará a todos los validadores y es puramente del lado del cliente. Lo uso para cambiar la forma en que se muestra la validación de ASP.Net, no la forma en que se realiza la validación. Debe estar empaquetado en $ (documento). Listo() para asegurarse de que sobrescribe la validación original de ASP.net.

/** 
* Re-assigns a couple of the ASP.NET validation JS functions to 
* provide a more flexible approach 
*/ 
function UpgradeASPNETValidation(){ 
    // Hi-jack the ASP.NET error display only if required 
    if (typeof(Page_ClientValidate) != "undefined") { 
     ValidatorUpdateDisplay = NicerValidatorUpdateDisplay; 
     AspPage_ClientValidate = Page_ClientValidate; 
     Page_ClientValidate = NicerPage_ClientValidate; 
    } 
} 

/** 
* Extends the classic ASP.NET validation to add a class to the parent span when invalid 
*/ 
function NicerValidatorUpdateDisplay(val){ 
    if (val.isvalid){ 
     // do custom removing 
     $(val).fadeOut('slow'); 
    } else { 
     // do custom show 
     $(val).fadeIn('slow'); 
    } 
} 

/** 
* Extends classic ASP.NET validation to include parent element styling 
*/ 
function NicerPage_ClientValidate(validationGroup){ 
    var valid = AspPage_ClientValidate(validationGroup); 

    if (!valid){ 
     // do custom styling etc 
     // I added a background colour to the parent object 
     $(this).parent().addClass('invalidField'); 
    } 
}