Validando formulario con jquery
Esta es una practica muy sencilla que consiste en usar jQuery para validar los campos de un formulario.
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
Creamos un controller vacio para que no nos de error (por lo del patron mvc):
El Controller: usuarios_controller
<?php
class UsuariosController extends ApplicationController
{
public function registro() {
}
}
?>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:
<?php
echo javascript_include_tag('jquery-validate/jquery');
echo javascript_include_tag('jquery-validate/jquery.validate');
?> <script language="javascript">
$(document).ready(function() {
$("#formulario").validate({
rules: {
nombre: {
required: true,
minlength: 5
},
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."
},
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 indicar 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: "Por favor, ingresa un correo valido.",
confirmarcorreo: {
required: "Por favor, ingresa un correo valido.",
equalTo: "No coincide con tu correo, por favor, verifica."
},
}
});
});
</script>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">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!
Descarga este ejemplo
Descarga: app_validacion_formulario para el core del beta1. .
