2009-01-20 10 views
12

¿Cómo puedo combinar JQuery con el modelo de validación del lado del cliente de ASP.NET?Manera elegante de combinar la validación de ASP.NET con JQuery

En general, he evitado la implementación del modelo de validación de ASP.NET porque siempre parece exagerado para lo que estaba haciendo. Para el sitio en el que estoy trabajando ahora solo estoy recopilando datos de usuarios no críticos y solo necesito una validación algo básica. No quiero que aparezcan mensajes en el DOM ni nada de eso. Siempre me ha resultado difícil lograr que se vea bien de todos modos.

Pero ahora necesito implementar algo un poco más elegante. Lo que quiero aprovechar en JQuery son expresiones de búsqueda inteligentes como 'dime si al menos una de estas casillas de verificación está marcada'. Soy nuevo en JQuery, pero creo que se trata de 1 línea de JQuery y mucho más complicada en el modelo ASP.NET tradicional.

Por lo tanto, quiero aprovechar al máximo las capacidades de JQuery pero no eliminar por completo el modelo de validación de ASP.NET.

Mi mejor enfoque hasta ahora es esto (que prácticamente va a espaldas de ASP.NET):

$('#<%=btnJoinMailingList.ClientID %>').bind('click', function(event) { 

    if (...) { 
     alert("You must enter a name"); 
     return false; 
    }  
    return true; 
}); 

¿Qué es un enfoque mejor aquí? ¿Hay algún complemento recomendado para JQuery?

PS. No quiero usar el modelo MVC. Intento crear un sitio muy 'RAD' y no tengo tiempo para profundizar en esas cosas nuevas y divertidas.

Respuesta

5

Los formularios web de ASP.NET y el modelo de validación de jQuery son muy, muy similares, en mi humilde opinión, en que ambos son del lado del cliente y la implementación de uno de ellos no menoscaba necesariamente el otro. La única diferencia real sería que, detrás de escena, los validadores de ASP.NET harán que el método Page.Validate() devuelva falso si tiene un campo no validado.

Puede optar por hacer rodar manualmente sus propios controles de validación, y luego causar el mismo comportamiento, pero como usted mismo ha indicado, eso podría ser excesivo.

jQuery también tiene su propio complemento Validator que es posible que desee consultar: http://docs.jquery.com/Plugins/Validation/Validator.

12

ASP.NET tiene muchos controles de validación, uno de ellos es el CustomValidator.
Puede darle una función de JavaScript personalizada que use jQuery y devuelva true o false mediante argumento. Puede usar este control para mostrar el mensaje de error automáticamente, o simplemente ejecutar el código jQuery y manejar la pantalla manualmente.

Aspx:

<asp:CustomValidator ID="CustomValidator1" runat="server" Display="None" 
        ClientValidationFunction="checkTextareaLengths"> 
</asp:CustomValidator> 

JavaScript:

function checkTextareaLengths(source, args){ 
    args.IsValid = true; 
    $('textarea').each(function(){ 
    if($(this).text().lenght > 400) 
     args.IsValid = false; 
    }); 
} 
+0

Nota: No creo que acaban de volver verdadero o falso va a trabajar - tiene que aceptar 2 params a la función (remitente, args) y establecer argumentos.IsValid = ok; al final para jugar bien con el marco de validación de formularios web. – chris

+0

@chris - Muy cierto - Sé que es mejor saberlo. ¡Sabes qué, actualizaré la respuesta! – Kobi

+0

@chris - ¡Hecho! En mi defensa, recuerdo vagamente que devolver el verdadero o falso funcionó para mí, pero este es el método oficial y definitivamente es mejor (espero no haber recomendado nada estúpido, ¡esta pregunta tiene 5700 visitas!). Gracias. – Kobi

5

validador ASP.NET es un lapso con atributos adicionales. Con jquery puede acceder a todos los validadores en la página o filtrarlos por cualquier criterio soportado por jquery. Para forzar la validación mediante javascript, llame a la función ValidatorValidate. Por ejemplo:

function validate_step(step_element) { 
     // find all validators on step_element and force validation 
     var validators = $(step_element).find("span[controltovalidate]"); 
     var stepIsValid = true; 
     validators.each(function() { 
      ValidatorValidate(this); stepIsValid &= this.isvalid; 
     }); 
     return stepIsValid; 
    } 
+0

Gracias ... funcionó perfectamente bien –

Cuestiones relacionadas