Revisión actual |
Tu texto |
Línea 1: |
Línea 1: |
− | '''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. | | 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 [http://dl.dropbox.com/u/2807704/kumbiaPHP/screenshot/validacion_formulario.png screenshot]
| |
| | | |
| Descargamos el jQuery Validate [http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery plugin: Validation] | | Descargamos el jQuery Validate [http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery plugin: Validation] |
Línea 20: |
Línea 16: |
| | | |
| | | |
− | En esta practica no realizaremos ninguna interaccion con ninguna base de datos, por lo que no habra modelos.
| + | Creamos un controller vacio para que no nos de error (por lo del patron mvc): |
| + | |
| + | '''El Controller: usuarios_controller''' |
| + | <source lang=php line> |
| + | <?php |
| | | |
− | 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.
| + | class UsuariosController extends ApplicationController |
| + | { |
| + | |
| + | public function registro() { |
| + | |
| + | } |
| | | |
− | Este partial lo hemos colocado directamente en la raiz mi_'''app/views/partials/validacion.phtml'''
| + | } |
| | | |
− | '''Partial: validacion.phtml'''
| + | ?> |
− | <source lang=javascript>
| |
− | <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>
| |
| </source> | | </source> |
| | | |
− | Colocamos el partial en la seccion <head> de la Plantilla: | + | 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>. |
| + | |
| + | 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') ?> |
| + | |
| + | '''Lo que iria en el <head> del Template:''' |
| <source lang=php line> | | <source lang=php line> |
− | <?php View::partial('validacion') ?> | + | <?php |
| + | echo javascript_include_tag('jquery-validate/jquery'); |
| + | echo javascript_include_tag('jquery-validate/jquery.validate'); |
| + | ?> |
| </source> | | </source> |
| | | |
− | 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:
| |
| <source lang=javascript> | | <source lang=javascript> |
− | $(function(){ | + | <script language="javascript"> |
− | // Validacion del formulario de registro
| + | $(document).ready(function() { |
− | $("#formularioreg").validate({
| + | $("#formulario").validate({ |
| rules: { | | rules: { |
| nombre: { | | nombre: { |
Línea 128: |
Línea 58: |
| minlength: 5 | | minlength: 5 |
| }, | | }, |
− | cedula: {
| |
− | required: true,
| |
− | minlength: 7
| |
− | },
| |
− | confirmarcedula: {
| |
− | required: true,
| |
− | minlength: 7,
| |
− | equalTo: "#cedula"
| |
− | },
| |
| usuario: { | | usuario: { |
| required: true, | | required: true, |
Línea 165: |
Línea 86: |
| minlength: "Este campo debe ser de al menos 5 caracteres." | | 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: { | | usuario: { |
| required: "Por favor, ingresa tu nombre de usuario.", | | required: "Por favor, ingresa tu nombre de usuario.", |
Línea 183: |
Línea 95: |
| }, | | }, |
| confirmarclave: { | | confirmarclave: { |
− | required: "Por favor, vuelve a ingresar tu clave.", | + | required: "Por favor, vuelve a indicar tu clave.", |
| minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas.", | | minlength: "Tu clave debe ser de al menos 5 caracteres de longitud o mas.", |
| equalTo: "No coincide con tu clave, por favor, verifica." | | equalTo: "No coincide con tu clave, por favor, verifica." |
| }, | | }, |
− | correo: { | + | correo: "Por favor, ingresa un correo valido.", |
− | required: "Por favor, ingresa un correo valido.",
| |
− | equalTo: "No coincide con tu correo, por favor, verifica."
| |
− | },
| |
| confirmarcorreo: { | | confirmarcorreo: { |
| required: "Por favor, ingresa un correo valido.", | | required: "Por favor, ingresa un correo valido.", |
Línea 196: |
Línea 105: |
| }, | | }, |
| } | | } |
− | }); | + | }); |
− | }); | + | }); |
− | </source> | + | </script> |
− | | |
− | | |
− | No olvides llamar a los archivos javascript del validate de jquery y para esta practica, tambien un CSS llamado formulario.css, que seria:
| |
− | <source lang=php line>
| |
− | <?php echo stylesheet_link_tag('formulario') ?>
| |
− | </source>
| |
− | | |
− | <source lang=php line>
| |
− | <?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
| |
− | ?>
| |
| </source> | | </source> |
| | | |
Línea 225: |
Línea 120: |
| <div class="texto-form"><?php echo text_field_tag('nombre','class: texto','size: 20'); ?></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="etiqueta">Telefono Hab:</div> |
| <div class="texto-form"><?php echo text_field_tag('telefhab','class: texto','size: 10'); ?></div> | | <div class="texto-form"><?php echo text_field_tag('telefhab','class: texto','size: 10'); ?></div> |
Línea 308: |
Línea 197: |
| | | |
| Enjoy! | | 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 este ejemplo == |
− | Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_validacion_formulario.zip app_validacion_formulario] para el '''core''' del '''beta1''' de Spirit v1.0. | + | Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_validacion_formulario.zip app_validacion_formulario] para el '''core''' del '''beta1'''. |
| | | |
| [[Categoría:Tutoriales KumbiaPHP]] | | [[Categoría:Tutoriales KumbiaPHP]] |
| [[Categoría:jQuery]] . | | [[Categoría:jQuery]] . |