Validando formulario con jquery

De KumbiaPHP Framework Wiki
Revisión del 17:21 20 jul 2010 de J053D (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)

Esta practica esta basada en la version 1 Spirit beta1 de KumbiaPHP Framework.

Esta es una practica muy sencilla que consiste en usar jQuery para validar los campos de un formulario.

Para que tengas una idea de esta practica, puedes ver el siguiente screenshot

Descargamos el jQuery Validate jQuery plugin: Validation

Esto vendra con muchos archivos javascript y una carpeta demo donde puede apreciarse desde un archivo index.html lo que hace este validador de campos de formulario.

Para adaptarlo a KumbiaPHP Framework solo vamos a colocar algunos archivos en su lugar y realizar un formulario para apreciar su accion. Vamos a crearnos una carpeta llamada jquery-validate en nuestra carpeta javascript del framework para tener ordenado los archivos relacionados a esta accion a usar en un formulario, lo cual quedaria asi: mi_app/public/javascript/jquery-validate/


Copia los siguientes archivos:

/jquery-validate/lib/jquery-1.4.2.js --> mi_app/public/javascript/jquery-validate/jquery-1.4.2.js

/jquery-validate/jquery.validate.js --> mi_app/public/javascript/jquery-validate/jquery.validate.js


En esta practica no realizaremos ninguna interaccion con ninguna base de datos, por lo que no habra modelos.

Colocamos el siguiente codigo en el Template, que para esta practica, es en el default de kumbiaPHP. Este codigo javascript iria obviamente en la seccion <head>. Hacemos un Partial para cargar en el <head> el codigo javascript que nos dara la funcionalidad de validacion de formulario que estamos buscando y que se demostrara en esta practica.

Este partial lo hemos colocado directamente en la raiz mi_app/views/partials/validacion.phtml

Partial: validacion.phtml 

<script language="javascript">
    $(document).ready(function() {
      $("#formularioreg").validate({
        rules: {
          nombre: {
            required: true,
            minlength: 5
          },
	  cedula: {
	    required: true,
	    minlength: 7
	  },
	  confirmarcedula: {
	    required: true,
	    minlength: 7,
	    equalTo: "#cedula"
	  },
          usuario: {
            required: true,
            minlength: 4
          },
          clave: {
            required: true,
            minlength: 5
          },
          confirmarclave: {
            required: true,
            minlength: 5,
            equalTo: "#clave"
          },
          correo: {
            required: true,
            email: true
          },
          confirmarcorreo: {
            required: true,
            email: true,
            equalTo: "#correo"
          },
       },
       messages: {
    	 nombre: {
            required: "Por favor, ingresa tu Nombre y Apellido.",
            minlength: "Este campo debe ser de al menos 5 caracteres."
         },
	 cedula: {
	    required: "Por favor, ingresa tu numero de cedula.",
	    minlength: "Este campo debe ser de al menos 7 digitos de longitud."
	 },
	 confirmarcedula: {
	    required: "Por favor, vuelve a ingresar tu numero de cedula.",
	    minlength: "Este campo debe ser de al menos 7 digitos de longitud.",
            equalTo: "No coincide con tu cedula, por favor, verifica."
	 },
         usuario: {
            required: "Por favor, ingresa tu nombre de usuario.",
            minlength: "Tu nombre de usuario debe ser de al menos 4 caracteres o mas."
         },
         clave: {
            required: "Por favor, ingresa una clave de usuario.",
            minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas."
         },
         confirmarclave: {
            required: "Por favor, vuelve a ingresar tu clave.",
            minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas.",
            equalTo: "No coincide con tu clave, por favor, verifica."
         },
         correo: {
             required: "Por favor, ingresa un correo valido.",
             equalTo: "No coincide con tu correo, por favor, verifica."
         },
         confirmarcorreo: {
            required: "Por favor, ingresa un correo valido.",
            equalTo: "No coincide con tu correo, por favor, verifica."
         },
      }
     });
    });
</script>

Colocamos el partial en la seccion <head> de la Plantilla: 

<?php View::partial('validacion') ?>

Tambien podemos colocar el cogido javascript no en partial sino en un propio archivo javascript nuestro, es opcional y a gusto de la persona si desea llamar el codigo por un partial o por un archivo javascript por ser codigo javascript.

Para el caso de un javascript nuestro, vamos a crear el archivo validarform.js que colocaremos en: mi_app/public/javascript/jquery-validate/validarform.js

Colocamos el codigo javascript dentro de este archivo: 

$(function(){
    // Validacion del formulario de registro
    $("#formularioreg").validate({
        rules: {
          nombre: {
            required: true,
            minlength: 5
          },
	  cedula: {
	    required: true,
	    minlength: 7
	  },
	  confirmarcedula: {
	    required: true,
	    minlength: 7,
	    equalTo: "#cedula"
	  },
          usuario: {
            required: true,
            minlength: 4
          },
          clave: {
            required: true,
            minlength: 5
          },
          confirmarclave: {
            required: true,
            minlength: 5,
            equalTo: "#clave"
          },
          correo: {
            required: true,
            email: true
          },
          confirmarcorreo: {
            required: true,
            email: true,
            equalTo: "#correo"
          },
       },
       messages: {
    	 nombre: {
            required: "Por favor, ingresa tu Nombre y Apellido.",
            minlength: "Este campo debe ser de al menos 5 caracteres."
         },
	 cedula: {
	    required: "Por favor, ingresa tu numero de cedula.",
	    minlength: "Este campo debe ser de al menos 7 digitos de longitud."
	 },
	 confirmarcedula: {
	    required: "Por favor, vuelve a ingresar tu numero de cedula.",
	    minlength: "Este campo debe ser de al menos 7 digitos de longitud.",
            equalTo: "No coincide con tu cedula, por favor, verifica."
	 },
         usuario: {
            required: "Por favor, ingresa tu nombre de usuario.",
            minlength: "Tu nombre de usuario debe ser de al menos 4 caracteres o mas."
         },
         clave: {
            required: "Por favor, ingresa una clave de usuario.",
            minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas."
         },
         confirmarclave: {
            required: "Por favor, vuelve a ingresar tu clave.",
            minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas.",
            equalTo: "No coincide con tu clave, por favor, verifica."
         },
         correo: {
             required: "Por favor, ingresa un correo valido.",
             equalTo: "No coincide con tu correo, por favor, verifica."
         },
         confirmarcorreo: {
            required: "Por favor, ingresa un correo valido.",
            equalTo: "No coincide con tu correo, por favor, verifica."
         },
      }
     }); 
});


No olvides llamar a los archivos javascript del validate de jquery y para esta practica, tambien un CSS llamado formulario.css, que seria: 

<?php echo stylesheet_link_tag('formulario') ?>
<?php
        echo javascript_include_tag('jquery-validate/jquery');
        echo javascript_include_tag('jquery-validate/jquery.validate');
        echo javascript_include_tag('jquery-validate/validarform'); // Este seria el caso si llamos desde un .js y no un partial el codigo.
        //View::partial('validacion') // Para el caso que se desee cargar el codigo por un partial
?>

Ahora realizaremos un formulario con algunos campos (algunos los validaremos y otros no). Creamos una carpeta llamada "usuarios" y una vista llamada registro.phtml quedando de esta forma: mi_app/views/usuarios/registro.phtml

La Vista: registro.phtml 

<?php echo form_remote_tag('usuarios/registro','id: formulario'); ?>
<div id="formulario_reg">
    <h2>Datos Personales</h2>
    <div class="etiqueta-form">Nombre:</div>
    <div class="texto-form"><?php echo text_field_tag('nombre','class: texto','size: 20'); ?></div>
    
    <div class="etiqueta-form">Cedula:</div>
    <div class="texto-form"><?php echo text_field_tag('cedula','class: texto','size: 10'); ?></div>
    
    <div class="etiqueta-form">Confirm.Cedula:</div>
    <div class="texto-form"><?php echo text_field_tag('confirmarcedula','class: texto','size: 10'); ?></div>

    <div class="etiqueta">Telefono Hab:</div>
    <div class="texto-form"><?php echo text_field_tag('telefhab','class: texto','size: 10'); ?></div>
    
    <div class="etiqueta">Telefono Movil:</div>
    <div class="texto-form"><?php echo text_field_tag('telefmovil','class: texto','size: 10'); ?></div>
    
    <div class="etiqueta">Fax:</div>
    <div class="texto-form"><?php echo text_field_tag('fax','class: texto','size: 10'); ?></div>
    
    <div class="etiqueta">Direccion:</div>
    <div class="texto-form"><?php echo textarea_tag('direccion','class: texto-largo','rows: 5','cols: 38'); ?></div>
    
    <h2>Datos de Usuario</h2>
    <div class="etiqueta">Usuario:</div>
    <div class="texto-form"><?php echo text_field_tag('usuario','class: texto'); ?></div>
    
    <div class="etiqueta">Password:</div>
    <div class="texto-form"><?php echo password_field_tag('clave','class: texto','id: clave','size: 10'); ?></div>
    
    <div class="etiqueta">Confirm.Password:</div>
     <div class="texto-form"><?php echo password_field_tag('confirmarclave','class: texto','size: 10'); ?></div>
     
    <div class="etiqueta">Correo:</div>
    <div class="texto-form"><?php echo text_field_tag('correo','class: texto','id: email','size: 20'); ?></div>
    
    <div class="etiqueta">Confirm.Correo:</div>
    <div class="texto-form"><?php echo text_field_tag('confirmarcorreo','class: texto','size: 20'); ?></div>
    
    <div class="etiqueta">Pregunta Secreta:</div>
    <div class="texto-form"><?php echo text_field_tag('pregunta','class: texto','size: 50'); ?></div>
    
    <div class="etiqueta">Respuesta:</div>
    <div class="texto-form"><?php echo text_field_tag('respuesta','class: texto','size: 50'); ?></div>
    
    <?php echo submit_tag('Enviar','class: boton'); ?>
</div>
<?php echo end_form_tag(); ?>

Algunos campos como Telefonos, Fax, direccion y pregunta secreta no seran validados, solo campos como usuario, password, correo.

Un pequeno CSS para modificar un poco el cuerpo del formulario: formulario.css 

body
{
	font-size	: 65.2%
}

label
{ 
	display		: inline-block; 
	width		: 7em; 
}
	
label.error
{ 
	color		: red; 
	margin-left	: 0.5em; 
	width		: 20em; 
}

h2
{
	margin		: 20px auto 10px auto;
}

#formulario_reg
{
	margin		: 10px 0 10px 50px; 
}

Eso es todo, solo queda cargar la vista del ejemplo: http://localhost/mi_ubicacion_de_kumbiaphp/app_validacion_formulario/usuarios/registro/

Enjoy!


Nota: Cuando realizamos formularios, en vista de que eso estara relacionado a una base de datos, los campos en vez de text_field_tag('nombre','class: texto','size: 20'); seria text_field_tag('tabla.nombre','class: texto','size: 20'); por ejemplo, siendo el campo 'nombre' de una tabla usuarios, seria text_field_tag('usuarios.nombre','class: texto','size: 20');


El HTML cambia en su codigo el . por un _ es decir, que usuarios.nombre, seria usuarios_nombre, pero el validador de formularios de jQuery necesita es el atributo html name y no id. Si en el codigo javascript de validacion se usa solo 'nombre' siendo en la pagina del formulario usuarios.nombre, no lo tomara en cuenta, debe ser usuarios_nombre en el codigo javascript de jQuery.


Esta practica no esta relacionada a una base de datos, por eso el código de jQuery no posee el llamado tabla_campo (usuarios_nombre) para este caso en particular. Con ver el código HTML que devuelve el navegador referente a los helpers de KumbiaPHP Framework puede verse presionando Ctrl+U y observar el name y id que devuelve el helper para saber su sintaxis y colocarla en el código javascript de jQuery.


Para el helper text_field_tag() con el ejemplo text_field_tag('usuarios.nombre'); donde usuarios es la tabla y nombre un campo de esta, el name devuelve el codigo HTML usuarios[nombre] y el id devuelto es usuarios_nombre.


Otra Solución: Se coloca el campo de esta manera: text_field_tag(array('usuarios.nombre'),'class: texto','size: 20'); De esta manera como ya se ha comentado, Kumbia lo convierte a id="usuarios_nombre" y name="usuarios[nombre]" respectivamente, como JQuery necesita el atributo name, en el código Javascript se coloca el name del campo con comillas simples, es decir 'usuarios[nombre]'


De esta manera el código Javascript queda así: 


  $(function(){
      //Validacion del formulario de registro
     $("#formularioreg").validate({
   	event: "blur",
       rules: {
        'usuarios[nombre]': {
           required: true,
           minlength: 5
         },
      },
      messages: {
   	 'usuarios[nombre]': {
           required: "Por favor, ingresa tu Nombre.",
           minlength: "Este campo debe ser de al menos 5 caracteres."
        },
     }
    });});


Así permite realizar la validación y enviar la información a una base de datos.

Descarga este ejemplo

Descarga: app_validacion_formulario para el core del beta1 de Spirit v1.0. .

Obtenido de «https://wiki.kumbiaphp.com/index.php?title=Validando_formulario_con_jquery&oldid=2862»