Edición de «Validando formulario con jquery»

De KumbiaPHP Framework Wiki

Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.

Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.

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 12: Línea 8:
 
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/'''
 
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
 +
 +
Creamos un controller vacio para que no nos de error (por lo del patron mvc):
  
−
Copia los siguientes archivos:
+
'''El Controller: usuarios_controller'''
 +
<source lang=php line>
 +
<?php
  
−
/jquery-validate/lib/jquery-1.4.2.js --> mi_app/public/javascript/jquery-validate/jquery-1.4.2.js
+
    class UsuariosController extends ApplicationController
 +
    {
 +
   
 +
        public function registro() {
 +
           
 +
        }
  
−
/jquery-validate/jquery.validate.js --> mi_app/public/javascript/jquery-validate/jquery.validate.js
+
    }
  
 +
?>
 +
</source>
  
 
En esta practica no realizaremos ninguna interaccion con ninguna base de datos, por lo que no habra modelos.
 
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.
+
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>.
  
−
Este partial lo hemos colocado directamente en la raiz mi_'''app/views/partials/validacion.phtml'''
+
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>
 +
<?php
 +
        echo javascript_include_tag('jquery-validate/jquery');
 +
        echo javascript_include_tag('jquery-validate/jquery.validate');
 +
?>
 +
</source>
  
−
'''Partial: validacion.phtml'''
 
 
<source lang=javascript>
 
<source lang=javascript>
−
<script language="javascript">
+
  <script language="javascript">
 
     $(document).ready(function() {
 
     $(document).ready(function() {
−
       $("#formularioreg").validate({
+
       $("#formulario").validate({
 
         rules: {
 
         rules: {
 
           nombre: {
 
           nombre: {
Línea 36: Línea 54:
 
             minlength: 5
 
             minlength: 5
 
           },
 
           },
−
  cedula: {
 
−
    required: true,
 
−
    minlength: 7
 
−
  },
 
−
  confirmarcedula: {
 
−
    required: true,
 
−
    minlength: 7,
 
−
    equalTo: "#cedula"
 
−
  },
 
 
           usuario: {
 
           usuario: {
 
             required: true,
 
             required: true,
Línea 73: Línea 82:
 
             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 91: Línea 91:
 
         },
 
         },
 
         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 106: Línea 103:
 
     });
 
     });
 
     });
 
     });
−
</script>
+
  </script>
−
</source>
 
−
 
 
−
Colocamos el partial en la seccion <head> de la Plantilla:
 
−
<source lang=php line>
 
−
<?php View::partial('validacion') ?>
 
−
</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>
 
−
$(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."
 
−
        },
 
−
      }
 
−
    });
 
−
});
 
−
</source>
 
−
 
 
−
 
 
−
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 116:
 
     <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 193:
  
 
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]] .

Ten en cuenta que todas las contribuciones a KumbiaPHP Framework Wiki pueden ser editadas, modificadas o eliminadas por otros colaboradores. Si no deseas que las modifiquen sin limitaciones, no las publiques aquí.
Al mismo tiempo, asumimos que eres el autor de lo que escribiste, o lo copiaste de una fuente en el dominio público o con licencia libre (véase Proyecto:Derechos de autor para más detalles). ¡No uses textos con copyright sin permiso!

Para editar esta página, responde la pregunta que aparece abajo (más información):

Cancelar Ayuda de edición (se abre en una ventana nueva)
Obtenido de «https://wiki.kumbiaphp.com/Validando_formulario_con_jquery»