Validar Textbox Usando Jquery en Asp.Net

Siempre tenemos la necesidad de validar los datos ingresados por el usuario en nuestras aplicaciones, ahora veremos como validar los datos ingresados en aplicaciones asp.net usando el plugin validate de jquery.

Lo primero que tenemos que hacer es descargar la librería jquery library y el plugin Plugins/Validation

La descarga del ejemplo ya incluirá las 2 librerías necesarias.

El diseño del formulario sera el siguiente.



Como pueden notar es un diseño simple 3 textbox uno para validar el nombre otro para validar la edad y el ultimo para validar un correo también tenemos un botón.

Ahora veamos el código de la función jquery para validar los datos.

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.validate.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
       $("#form1").validate({
           rules: {
           'txtnombre': 'required',
           'txtedad': { required: true, number: true, minlength: 1 },
           'txtcorreo': { required: true, email: true }
           },
           messages: {
           'txtnombre': 'Ingrese su nombre',
           'txtedad': { required: 'Ingrese su edad', number: 'Debe ingresar datos numericos' },
           'txtcorreo': { required: 'Ingrese un correo electrónico', email: 'Ingrese un correo valido. Ejemplo: cristian@hotmail.com' }
           },

           debug: true,
           submitHandler: function (form) {
              var nombre = $('#<%=txtnombre.ClientID%>').val();
              var edad = $('#<%=txtedad.ClientID%>').val();
              alert("Hola" + " " + nombre + " " + "tu edad es:" + "" + edad);
           }
       });
   });
</script>

Ahora veamos las cosas mas importantes del código.
Las primeras 2 lineas son necesarias para poder hacer uso de jquery y el plugin validate.
form1 es el nombre del id del formulario que estamos validando.
dentro de rules: {} tenemos las reglas o validaciones que aremos a nuestros controles.
txtnombre, txtedad y txtcorreo es el nombre del id de nuestros controles.
dentro de messages: {} personalizamos los mensajes de error que se mostraran.

El código que sigue luego de messages.

            debug: true,
         submitHandler: function (form) {
            var nombre = $('#<%=txtnombre.ClientID%>').val();
            var edad = $('#<%=txtedad.ClientID%>').val();
            alert("Hola" + " " + nombre + " " + "tu edad es:" + "" + edad);
         }

Este código es lo que ara el formulario en caso que los datos se ingresen correctamente, en este caso lo único que hacemos es mostrar el nombre y la edad en un mensaje.





Como podemos notar validar datos usando jquery es fácil y lo mejor es que toda la validación se hace al lado del cliente.

Eso es todo por ahora el ejemplo es sencillo solo para explicar un poco como funciona este plugin de jquery, todo se puede personalizar darle formato al mensaje de error cambiar el color etc.

Descargar Proyecto
Si quieren donarme para una soda lo pueden hacer aqui.