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 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. | ||
− | |||
− | |||
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): | ||
− | + | '''El Controller: usuarios_controller''' | |
+ | <source lang=php line> | ||
+ | <?php | ||
− | + | class UsuariosController extends ApplicationController | |
+ | { | ||
+ | |||
+ | public function registro() { | ||
+ | |||
+ | } | ||
− | + | } | |
+ | ?> | ||
+ | </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> | + | 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> | ||
+ | <?php | ||
+ | echo javascript_include_tag('jquery-validate/jquery'); | ||
+ | echo javascript_include_tag('jquery-validate/jquery.validate'); | ||
+ | ?> | ||
+ | </source> | ||
− | |||
<source lang=javascript> | <source lang=javascript> | ||
− | <script language="javascript"> | + | <script language="javascript"> |
$(document).ready(function() { | $(document).ready(function() { | ||
− | $("# | + | $("#formulario").validate({ |
rules: { | rules: { | ||
nombre: { | nombre: { | ||
Línea 36: | Línea 54: | ||
minlength: 5 | minlength: 5 | ||
}, | }, | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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." | ||
}, | }, | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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 | + | 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.", |
− | |||
− | |||
− | |||
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> | </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">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! | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== 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''' | + | 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]] . |