Edición de «Validando formulario con jQuery 2»
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 3: | Línea 3: | ||
|texto ='''Articulo realizado para Spirit v1.0 beta1.'''<br /> | |texto ='''Articulo realizado para Spirit v1.0 beta1.'''<br /> | ||
}} | }} | ||
| − | En KumbiaPHP Framework ya se ha realizado una practica sobre la validación de campos de formulario bajo jQuery llamado [http://wiki.kumbiaphp.com/Validando_formulario_con_jquery Validando formulario con jQuery] el cual esta basado en Rules (reglas) y | + | En KumbiaPHP Framework ya se ha realizado una practica sobre la validación de campos de formulario bajo jQuery llamado [http://wiki.kumbiaphp.com/Validando_formulario_con_jquery Validando formulario con jQuery] el cual esta basado en Rules (reglas) y mensajes de estos. Pero ese ejemplo esta orientado a validar todos los campos que se le indiquen del formulario, por lo que si realizamos un formulario que debe llenar mas de un tipo de usuario, donde algunos campos solo serán llenados acorde al tipo de usuario seleccionado, por ejemplo, indicado de una lista <select>, es difícil incluir la decisión de validar basado a una selección previa. |
| Línea 342: | Línea 342: | ||
return '<div id="form_alert_'+CampoNombre+'_msg" class="form_alert_msg">'+msg+'</div>'; | return '<div id="form_alert_'+CampoNombre+'_msg" class="form_alert_msg">'+msg+'</div>'; | ||
} | } | ||
| − | + | function onSelectChange(){ | |
$("#soy").change(function(){ | $("#soy").change(function(){ | ||
switch($("#soy").val()){ | switch($("#soy").val()){ | ||
| Línea 363: | Línea 363: | ||
break; | break; | ||
| − | case " | + | case "cual": |
$("#seccion_medico").css("display", "none"); | $("#seccion_medico").css("display", "none"); | ||
$("#seccion_secretaria").css("display", "none"); | $("#seccion_secretaria").css("display", "none"); | ||
| Línea 369: | Línea 369: | ||
break; | break; | ||
} | } | ||
| − | }) | + | }) |
| − | } | + | } |
| − | |||
function Limpiar(){ | function Limpiar(){ | ||
$("#seccion_medico").css("display", "none"); | $("#seccion_medico").css("display", "none"); | ||
| Línea 503: | Línea 502: | ||
<div class="textos"> | <div class="textos"> | ||
<span class="comodin">*</span> | <span class="comodin">*</span> | ||
| − | <select id="soy"> | + | <select id="soy" onClick="onSelectChange();"> |
| − | <option selected value=" | + | <option selected value="cual">Seleccione...</option> |
<option value="med">Medico</option> | <option value="med">Medico</option> | ||
<option value="secre">Secretaria</option> | <option value="secre">Secretaria</option> | ||
| Línea 687: | Línea 686: | ||
</source> | </source> | ||
| − | |||
| − | |||
Debe llamarse al archivo javascript y al CSS en el Template, que en este caso es el default de KumbiaPHP | Debe llamarse al archivo javascript y al CSS en el Template, que en este caso es el default de KumbiaPHP | ||
| Línea 695: | Línea 692: | ||
</source> | </source> | ||
| − | + | Cargando jQuery y la validación que hemos escrito para los campos del formulario basados en jQuery: miapp/views/templates/default.phtml | |
<source lang=php> | <source lang=php> | ||
<?php echo javascript_include_tag('jquery'); ?> | <?php echo javascript_include_tag('jquery'); ?> | ||
| Línea 706: | Línea 703: | ||
El código de bienvenida.css | El código de bienvenida.css | ||
MIAPP/public/css/bienvenida.css | MIAPP/public/css/bienvenida.css | ||
| + | |||
Al siguiente código: | Al siguiente código: | ||
| Línea 738: | Línea 736: | ||
| − | '''Nota:''' Los div que contienen la seccion de campos Medico, Secretaria y Paciente tienen un '''style="display: none;"''' para una mejor vista de como el validador evalua u omite campos dependiendo de la seleccion de tipo de usuario indicada, invito a quitar lo comentado de esos div y ver el formulario mas completo/expandido. Tambien debe | + | '''Nota:''' Los div que contienen la seccion de campos Medico, Secretaria y Paciente tienen un '''style="display: none;"''' para una mejor vista de como el validador evalua u omite campos dependiendo de la seleccion de tipo de usuario indicada, invito a quitar lo comentado de esos div y ver el formulario mas completo/expandido. Tambien debe quitarse el '''onClick="onSelectChange();"''' que tiene el <select>. Pero la descarga de esta practica conserva el ocultar estas capas/div para ser mostradas/ocultadas dependiendo de la selección establecida en la lista de tipo de usuario, lo cual es lo mejor. |
| Línea 744: | Línea 742: | ||
Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_valform.zip app_valform.zip] para el '''core''' del '''beta1''' de '''Spirit v1.0''' | Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_valform.zip app_valform.zip] para el '''core''' del '''beta1''' de '''Spirit v1.0''' | ||
| − | |||
| − | Ahora para dar una idea de este tipo de validaciones a un formulario conectado a una base de datos, he tomado como ejemplo el [http://wiki.kumbiaphp.com/Como_hacer_un_CRUD_en_KumbiaPHP_Framework CRUD del Wiki] y le he incorporado a ese sencillo ejemplo, la validación jquery. | + | Ahora para dar una idea de este tipo de validaciones a un formulario conectado a una base de datos, he tomado como ejemplo el [http://wiki.kumbiaphp.com/Como_hacer_un_CRUD_en_KumbiaPHP_Framework CRUD del Wiki] y le he incorporado a ese sencillo ejemplo, la validación jquery. |
| + | |||
| + | == Descarga Validando campos de Formulario en CRUD == | ||
Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_crud_validando.zip app_crud_validando.zip] para el '''core''' del '''beta1''' de '''Spirit v1.0''' | Descarga: [http://dl.dropbox.com/u/2807704/kumbiaPHP/v1_b1/app_crud_validando.zip app_crud_validando.zip] para el '''core''' del '''beta1''' de '''Spirit v1.0''' | ||
| Línea 762: | Línea 761: | ||
Para cualquier comentario referente a estos ejemplos, puedes acudir al IRC, la lista de correo o el Foro de KumbiaPHP. | Para cualquier comentario referente a estos ejemplos, puedes acudir al IRC, la lista de correo o el Foro de KumbiaPHP. | ||
| − | |||
| − | |||
| − | |||
