Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Valida Formularios Con Jquery

    Cargado por

    Jblink2
    89 vistas4 páginas

    Título original

    Valida Formularios Con jQuery

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    89 vistas4 páginas

    Valida Formularios Con Jquery

    Cargado por

    Jblink2

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 4

    Valida formularios con jQuery

    Cuando tenemos que validar los datos de un formulario podemos recurrir a Javascript y crear nuestra funcin de validacin, pero tambin podemos recurrir a jQuery para validar el formulario de forma rpida y sencilla. Para esto descargarmos jQuery y el plugin Validate.

    Pasos previos
    En el header del archivo que contiene el formulario aadimos:
    1 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validate.js"type="text/javascript"></script>

    A continuacin aadimos:
    1 <script type="text/javascript"><!-2 $().ready(function() { 3 $("#formulario").validate(); 4 }); 5 // --></script>

    Para distinguir el formulario al que se le aplica la validacin, jQuery busca el que tenga por id formulario. Podemos cambiar #formulario por #loquesea, siendo loquesea la id del formulario. El cdigo HTML del formulario puede ser una cosa as:
    01 <form id="formulario" method="post"> Nombre: 02 <label></label> 03 04 <input id="nombre" name="nombre" type="text" />Contrasea: 05 <label></label> 06 07 <input id="pass_1" name="pass_1" type="password" />Repite contrasea: 08 <label></label> 09 10 <input id="pass_2" name="pass_2" type="password" />Email: 11 <label></label> 12 13 <input id="email" name="email" type="text" /><label></label> 14 15 <input id="button" name="button" type="submit" value="Enviar" /> </form>

    Ahora tenemos que definir qu campos necesitan validacin, para ello disponemos de dos mtodos:

    1. Ponerle una clase especfica a cada input, por ejemplo, class=required har que el campo fuese obligatorio. 2. Definir los campos que requieres validacin y qu tipo de validacin requieren en el cdigo Javascript que hemos aadido al principio.

    El mtodo de las clases


    Comencemos por el primer mtodo: aadiendo clases a los campos del formulario. Si queremos que todos los campos sean obligatorios basta con aadirles a todos class=required, ahora si dejamos en blanco un campo con esta clase nos mostrar un aviso. Si le ponemos de clase email, buscar la estructura de una direccin de correo electrnico, en casi de no ser una estructura correcta (nombre@dominio.nnn), mostrar un aviso. Podramos dejar as el formulario anterior:
    01 <form id="formulario" method="post"> Nombre: 02 <label></label> 03 0 <input id="nombre" class="required" name="nombre" type="text" />Contra 4 sea: 05 <label></label> 06 0 <input id="pass_1" class="required" name="pass_1" type="password" />Re 7 pite contrasea: 08 <label></label> 09 1 <input id="pass_2" class="required" name="pass_2" type="password" />Em 0 ail: 11 <label></label> 12 13 14 15 <input id="button" name="button" type="submit" value="Enviar" /> </form> <input id="email" class="required email" name="email" type="text" /><label></label>

    El mtodo de la definicin
    El segundo mtodo es un poco ms complejo. Volvemos al punto en el que aadimos:
    1 <script type="text/javascript"><!-2 $().ready(function() { 3 $("#formulario").validate();

    4 }); 5 // --></script>

    Ahora en lugar de esto debemos aadir: view source print?


    01 <script type="text/javascript"><!-02 $().ready(function() { 03 $("#formulario").validate({ 04 rules: { 05 pass_2: { 06 required: true, 07 equalTo: "#pass_1" 08 } 09 } 10 }); 11 }); 12 // --></script>

    Cmo funciona?
    Bien, despus de rules:{ aadimos el id del campo de nuestro formulario seguido de las reglas que debe cumplir. En este ejemplo el campo pass_2 es obligatorio, y adems debe ser igual a pass_1, si no lo es mostrar un aviso. Podemos aadir ms reglas, como caracteres mximos, rango de caracteres (slo para nmero enteros), fechas, etc, podis ver una lista de todas las reglas aqu. Ambos mtodos son compatibles, podemos usar los dos en el mismo formulario.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://jzaefferer.github.com/jqueryvalidation/jquery.validate.js"></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; verticalalign: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> <script> $(document).ready(function(){ $("#commentForm").validate(); }); </script>

    </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>A simple comment form with submit validation and default messages</legend> <p> <label for="cname">Name</label> <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /> </p> <p> <label for="cemail">E-Mail</label> <em>*</em><input id="cemail" name="email" size="25" class="required email" /> </p> <p> <label for="curl">URL</label> <em> </em><input id="curl" name="url" size="25" class="url" value="" /> </p> <p> <label for="ccomment">Your comment</label> <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form> </body> </html>

    También podría gustarte