| 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 30: |
Línea 26: |
| | <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 32: |
| | 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 60: |
| | 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 69: |
| | }, | | }, |
| | 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 113: |
Línea 88: |
| | <?php View::partial('validacion') ?> | | <?php View::partial('validacion') ?> |
| | </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>
| |
| − | $(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: | | No olvides llamar a los archivos javascript del validate de jquery y para esta practica, tambien un CSS llamado formulario.css, que seria: |
| Línea 210: |
Línea 98: |
| | echo javascript_include_tag('jquery-validate/jquery'); | | echo javascript_include_tag('jquery-validate/jquery'); |
| | echo javascript_include_tag('jquery-validate/jquery.validate'); | | 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 111: |
| | <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 188: |
| | | | |
| | 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]] . |
