Validando formulario con jQuery 2 - Historial de revisiones

190.74.58.234 en 17:43 23 jul 2010

2010-07-23T17:43:07Z

190.74.58.234 en 17:32 23 jul 2010

2010-07-23T17:32:48Z

J053D: /* Descarga Validando campos de Formulario en CRUD */

2010-07-21T20:41:05Z

Descarga Validando campos de Formulario en CRUD

J053D: /* Descarga Validando campos de Formulario con jQuery */

2010-07-21T20:39:20Z

Descarga Validando campos de Formulario con jQuery

J053D en 20:37 21 jul 2010

2010-07-21T20:37:47Z

J053D en 20:37 21 jul 2010

2010-07-21T20:37:14Z

J053D en 20:32 21 jul 2010

2010-07-21T20:32:42Z

J053D en 20:25 21 jul 2010

2010-07-21T20:25:14Z

J053D: Página creada con '{{cleanupbox |image=20px |texto ='''Articulo realizado para Spirit v1.0 beta1.'''
}} En KumbiaPHP Framework ya se ha realizado una practi...'

2010-07-21T20:24:03Z

Página creada con '{{cleanupbox |image=20px |texto ='''Articulo realizado para Spirit v1.0 beta1.'''<br /> }} En KumbiaPHP Framework ya se ha realizado una practi...'

Página nueva

{{cleanupbox
|image=[[Archivo:Information_icon4.png|20px]]
|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 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.

Esta practica trata de esa necesidad, de tener un formulario donde todos los campos indicados serán vigilados por la validación pero solo esta se activara para algunos campos dependiendo de una condición o sentencia de decisión previa. Esta validación esta basada en sentencias en Switch y sentencias de decisión If para realizar sus validaciones.

Por poner cualquier ejemplo, este trata de un formulario de registro que es llenado por 3 tipos de usuario, los cuales son: Medico, Secretaria y Paciente.
Hay campos que son llenado por los 3 tipos de usuario, pero hay otros que solo son llenados dependiendo del tipo de usuario indicado en una lista. El validador vigila todos los campos incluyendo por los del tipo de usuario indicado. Dependiendo del tipo de usuario seleccionado de la lista, el validador exigirá u omitirá la vigilia del correcto llenado de esos campos.

Por ser un ejemplo únicamente para validar campos de formulario de una vista, no habrá procesos de Modelo ni de Controller, pero obviamente, el controller solo tendrá (para esta practica) un '''public function registro(){}''' sin contenido en el controlller '''usuarios_controller.php'''

* El javascript jQuery: '''validando.js''' o como lo desees llamar
miapp/public/javascript/validando.js
<source lang=javascript>
var demo_mode = true; // se establece en false para permitir el envio del formulario

function TareaVerificarCampos(CampoNombre){
/*
1. Hacer un nuevo "case" por cada campo que deseas validar.
2. Coloca tu validacion dentro de la sentencia "if"
3. Llama la funcion "failField" cuando la validacion falla, muestra un mensaje de error.
4. Configurar la variable "vacio=false" cuando la validacion falló.
5. Llama la funcion "passField" cuando la validacion fue correcta.
*/

var vacio = true;

switch (CampoNombre){
case "nombre":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
}else if ($("#"+CampoNombre).val().length < 6) {
failField(CampoNombre,"Este campo debe ser mayor a 6 caracteres");
vacio = false;
}else if ($("#"+CampoNombre).val().length > 40) {
failField(CampoNombre,"Este campo debe ser menor a 40 caracteres");
vacio = false;
}else{
passField(CampoNombre);
}
break;

case "cedula":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo debe tener una longitud mayor a 6");
vacio = false;
}else{
passField(CampoNombre);
}
break;

case "confirmar_cedula":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo debe tener una longitud mayor a 6");
vacio = false;
} else if ($("#"+CampoNombre).val()!=$("#cedula").val()){
failField(CampoNombre,"No coincide con la cedula, verifica");
vacio = false;
} else {
passField(CampoNombre);
}
break;

case "usuario":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
}else if ($("#"+CampoNombre).val().length < 5) {
failField(CampoNombre,"Este campo debe ser mayor a 4 caracteres");
vacio = false;
}else if ($("#"+CampoNombre).val().length > 20) {
failField(CampoNombre,"Este campo debe ser menor a 20 caracteres");
vacio = false;
} else {
passField(CampoNombre);
}
break;

case "clave":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
}else if ($("#"+CampoNombre).val().length < 7) {
failField(CampoNombre,"Este campo debe ser mayor a 6 caracteres");
vacio = false;
}else if ($("#"+CampoNombre).val().length > 30) {
failField(CampoNombre,"Este campo debe ser menor a 30 caracteres");
vacio = false;
} else {
passField(CampoNombre);
}
break;

case "confirmarpass":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
}else if ($("#"+CampoNombre).val().length < 7) {
failField(CampoNombre,"Este campo debe ser mayor a 6 caracteres");
vacio = false;
}else if ($("#"+CampoNombre).val().length > 30) {
failField(CampoNombre,"Este campo debe ser menor a 30 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val()!=$("#clave").val()){
failField(CampoNombre,"No coincide con la clave, verifica");
vacio = false;
} else {
passField(CampoNombre);
}
break;

case "correo":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else {
passField(CampoNombre);
}
break;

case "confirmarcorreo":
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val()!=$("#correo").val()){
failField(CampoNombre,"No coincide con el correo, verifica");
vacio = false;
} else {
passField(CampoNombre);
}
break;

// MEDICO:
case "rif_med":
if ($("#soy").val()=="med"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo debe tener una longitud mayor a 6");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 15){
failField(CampoNombre,"Este campo debe tener una longitud menor a 15");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

case "mat_colegio":
if ($("#soy").val()=="med"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 4){
failField(CampoNombre,"Debe ser tener una longitud mayor a 3");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 6){
failField(CampoNombre,"Debe ser tener una longitud menor a 6");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

case "mat_sanidad":
if ($("#soy").val()=="med"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 4){
failField(CampoNombre,"Debe ser tener una longitud mayor a 3");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 6){
failField(CampoNombre,"Debe ser tener una longitud menor a 6");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

// SECRETARIA:
case "nombre_medico":
if ($("#soy").val()=="secre"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo no puede ser menor a 6 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 40){
failField(CampoNombre,"Este campo no puede ser mayor a 40 caracteres");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

case "clave_secretaria":
if ($("#soy").val()=="secre"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo no puede ser menor a 6 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 30){
failField(CampoNombre,"Este campo no puede ser mayor a 30 caracteres");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

case "confirmar_clave_secretaria":
if ($("#soy").val()=="secre"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo no puede ser menor a 6 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 30){
failField(CampoNombre,"Este campo no puede ser mayor a 30 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val()!=$("#clave_secretaria").val()){
failField(CampoNombre,"No coincide con la clave, verifica");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

// PACIENTE:
case "nombre_medico_paciente":
if ($("#soy").val()=="pac"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo no puede ser menor a 6 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 40){
failField(CampoNombre,"Este campo no puede ser mayor a 40 caracteres");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

case "clave_paciente":
if ($("#soy").val()=="pac"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo no puede ser menor a 6 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 30){
failField(CampoNombre,"Este campo no puede ser mayor a 30 caracteres");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;

case "confirmar_clave_paciente":
if ($("#soy").val()=="pac"){
if ($("#"+CampoNombre).val()==""){
failField(CampoNombre,"Este campo no puede estar vacio");
vacio = false;
} else if ($("#"+CampoNombre).val().length < 7){
failField(CampoNombre,"Este campo no puede ser menor a 6 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val().length > 30){
failField(CampoNombre,"Este campo no puede ser mayor a 30 caracteres");
vacio = false;
} else if ($("#"+CampoNombre).val()!=$("#clave_paciente").val()){
failField(CampoNombre,"No coincide con la clave, verifica");
vacio = false;
}else{
passField(CampoNombre);
}
}
break;
}
return vacio;
}

function VerificarCampo (campo) {
return TareaVerificarCampos(campo.name);
}

function ChequearFormulario(frm){
var vacio = true;
for (var i=0; i<frm.length; i++){
if(!TareaVerificarCampos(frm.elements[i].name)){
vacio = false;
}
}
if(vacio){
passField("subbtn");
if(demo_mode){
$("#formulario").hide(25);
$("#instrucciones").html('Te haz registrado Exitosamente, gracias <a href="#" onclick="demoShowForm();return false;">Mostrar formulario nuevamente</a>');
return false;
}
}else{
failField("subbtn","Por favor llena los campos con notificaciones para terminar con tu registro.");
}
return vacio;
}
function passField(CampoNombre){
$("#form_alert_"+CampoNombre+"_msg").remove();
}
function failField (CampoNombre,msg){
$("#form_alert_"+CampoNombre+"_msg").remove();
$("#"+CampoNombre).after(alertMsgHTML(CampoNombre,msg));
}
function alertMsgHTML (CampoNombre,msg){
return '<div id="form_alert_'+CampoNombre+'_msg" class="form_alert_msg">'+msg+'</div>';
}
function onSelectChange(){
$("#soy").change(function(){
switch($("#soy").val()){
case "med":
$("#seccion_medico").css("display", "block");
$("#seccion_secretaria").css("display", "none");
$("#seccion_paciente").css("display", "none");
break;

case "secre":
$("#seccion_secretaria").css("display", "block");
$("#seccion_medico").css("display", "none");
$("#seccion_paciente").css("display", "none");
break;

case "pac":
$("#seccion_paciente").css("display", "block");
$("#seccion_medico").css("display", "none");
$("#seccion_secretaria").css("display", "none");
break;

case "cual":
$("#seccion_medico").css("display", "none");
$("#seccion_secretaria").css("display", "none");
$("#seccion_paciente").css("display", "none");
break;
}
})
}
function Limpiar(){
$("#seccion_medico").css("display", "none");
$("#seccion_secretaria").css("display", "none");
$("#seccion_paciente").css("display", "none");
$("#form_alert_nombre_msg").remove();
$("#form_alert_cedula_msg").remove();
$("#form_alert_confirmar_cedula_msg").remove();
$("#form_alert_usuario_msg").remove();
$("#form_alert_clave_msg").remove();
$("#form_alert_confirmarpass_msg").remove();
$("#form_alert_correo_msg").remove();
$("#form_alert_confirmarcorreo_msg").remove();
$("#form_alert_rif_med_clave_msg").remove();
$("#form_alert_mat_colegio_clave_msg").remove();
$("#form_alert_mat_sanidad_clave_msg").remove();
$("#form_alert_nombre_medico_clave_msg").remove();
$("#form_alert_clave_secretaria_clave_msg").remove();
$("#form_alert_confirmar_clave_secretaria_msg").remove();
$("#form_alert_confirmar_clave_secretaria_msg").remove();
$("#form_alert_nombre_medico_paciente_msg").remove();
$("#form_alert_clave_paciente_msg").remove();
$("#form_alert_confirmar_clave_paciente_msg").remove();
$("#form_alert_subbtn_msg").remove();
}
$(document).ready(function(){
document.formulario.nombre.focus();
});
</source>

* Vista: '''registro.phtml'''
miapp/views/usuarios/registro.phtml
<source lang=php>
<?php View::content(); ?>
<div id="contenedor">
<?php echo form_tag('usuarios/registro'); ?>

<div class="titulos">
<p id="instrucciones">Llena todos los campos y los <strong>acorde a tu tipo de usuario</strong>.</p>
<p>Los campos con <span class="comodin">*</span>son requeridos.</p>
<h3>Datos Estandar:</h3>
</div>
<div class="fila">
<div class="etiquetas">
<label for="nombre">Nombre:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('nombre','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="cedula">Cedula:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('cedula','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="confirmacedula">Otra vez:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('confirmar_cedula','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="telef">Telefono:</label>
</div>
<div class="textos">
<?php echo text_field_tag('telefono','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="profesion">Profesion:</label>
</div>
<div class="textos">
<?php echo text_field_tag('profesion','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="titulos">
<h3>Datos de Usuario:</h3>
</div>
<div class="fila">
<div class="etiquetas">
<label for="usuario">Usuario:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('usuario','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="password">Password:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('clave','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="confirmapass">Otra vez:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('confirmarpass','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="correo">Correo:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('correo','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="confirmacorreo">Otra vez:</label>
</div>
<div class="textos">
<span class="comodin">*</span><?php echo text_field_tag('confirmarcorreo','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="soy">Soy:</label>
</div>
<div class="textos">
<span class="comodin">*</span>
<select id="soy" onClick="onSelectChange();">
<option selected value="cual">Seleccione...</option>
<option value="med">Medico</option>
<option value="secre">Secretaria</option>
<option value="pac">Paciente</option>
</select>
</div>
</div>

<div id="seccion_medico" style="display: none;">
<div class="fila" id="med">
<strong>Medico:</strong>
</div>
<div class="fila">
<div class="etiquetas">
<label for="rifmed">Rif:</label>
</div>
<div class="textos">
<?php echo text_field_tag('rif_med','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="matcolegio">Matricula Colegio:</label>
</div>
<div class="textos">
<?php echo text_field_tag('mat_colegio','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="matsanidad">Matricula Sanidad:</label>
</div>
<div class="textos">
<?php echo text_field_tag('mat_sanidad','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
</div>
<div id="seccion_secretaria" style="display: none;">
<div class="fila" id="secre">
<strong>Secretaria:</strong>
</div>
<div class="fila">
<div class="etiquetas">
<label for="nombremedico">Nombre Medico:</label>
</div>
<div class="textos">
<?php echo text_field_tag('nombre_medico','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="clavesecretaria">Clave:</label>
</div>
<div class="textos">
<?php echo text_field_tag('clave_secretaria','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="confirmaclavesecretaria">Otra vez:</label>
</div>
<div class="textos">
<?php echo text_field_tag('confirmar_clave_secretaria','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
</div>
<div id="seccion_paciente" style="display: none;">
<div class="fila" id="pac">
<strong>Paciente:</strong>
</div>
<div class="fila">
<div class="etiquetas">
<label for="nombremedicopaciente">Nombre Medico:</label>
</div>
<div class="textos">
<?php echo text_field_tag('nombre_medico_paciente','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="clavepaciente">Clave:</label>
</div>
<div class="textos">
<?php echo text_field_tag('clave_paciente','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
<div class="fila">
<div class="etiquetas">
<label for="confirmaclavepaciente">Otra vez:</label>
</div>
<div class="textos">
<?php echo text_field_tag('confirmar_clave_paciente','class: texto','size: 20','onblur: VerificarCampo(this)'); ?>
</div>
</div>
</div>
<div class="fila">
<input type="reset" value="Limpiar" class="boton" onClick="Limpiar()"/>
<?php echo submit_tag('Enviar','class: boton'); ?>
</div>
</form>
</div>
</source>

* Un CSS para el formulario: '''formreg.css'''
miapp/public/css/formreg.css
<source lang=css>
#contenedor
{
float : left;
width : 100%;
}

#instrucciones
{
margin : 10px 0 0 20px;
}

.comodin
{
color : red;
margin : 0 5px 0 0;
}

h3
{
margin : 20px 0 10px 20px;
}

.fila, p
{
margin : 0 0 10px 20px;
width : 100%;
float : left; /* Este era el problema */
}

.etiquetas
{
float : left;
width : 150px;
}

.textos
{
float : left;

}

#telefono, #profesion
{
margin : 0 0 0 10px;
}

.boton
{
margin : 10px 0 0 0;
}

#soy
{
margin : 0 0 0 -5px;
}

.form_alert_msg {
font-size : 14px;
font-weight : bold;
color : #990000;
display :inline;
background-color: #FFFFCC;
padding : 2px 5px;
margin-left : 5px;
border-top : 1px solid #990000;
border-right : 2px solid #990000;
border-bottom : 1px solid #990000;
border-left : 2px solid #990000;
}
</source>

Debe llamarse al archivo javascript y al CSS en el Template, que en este caso es el default de KumbiaPHP
<source lang=php>
<?php echo stylesheet_link_tag('formreg') ?>
</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>
<?php echo javascript_include_tag('jquery'); ?>
<?php echo javascript_include_tag('validando'); ?>
</source>

'''Nota:''' En el CSS creado para el formulario (formreg.css) un float:left ocasionaba problemas con el CSS bienvenida.css de KumbiaPHP, (el footer aparecia arriba unido a la cabecera), por lo que para arreglar este problema entre los dos CSS, solo hay que agregar un par de lineas al CSS bienvenida.css de KumbiaPHP.

El código de bienvenida.css
MIAPP/public/css/bienvenida.css

Al siguiente código:
<source lang=css>
#footer {
background-color: #8A6F5C;
border-top: 4px solid #555555;
color: white;
padding: 1em;
height: 50px;
}
</source>

Le agregamos un par de lineas:
<source lang=css>
#footer {
background-color: #8A6F5C;
border-top: 4px solid #555555;
color: white;
padding: 1em;
height: 50px;
/***************/
float: left;
width: 98%;
/***************/
}
</source>

Con esta practica tenemos un mejor control de validación de campos, aunque debe validarse de mejor forma (anexarle) el que valide correos (string con @ y terminación .dominio) y para casos mas evolucionados, validar campos numéricos y de fecha, para lo cual bien sea a futuro el autor u otra persona, es bienvenido cualquier mejora y anexos de esta practica.

'''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.

== Descarga Validando campos de Formulario con jQuery ==
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.

== 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'''

Para este ejemplo de las validaciones en un CRUD la configuracion de '''databases.ini''' es la siguiente:
<source lang=ini>
[development]
host = localhost
username = root
password = 123
name = test
type = mysql
</source>

Para cualquier comentario referente a estos ejemplos, puedes acudir al IRC, la lista de correo o el Foro de KumbiaPHP.

← Revisión anterior		Revisión del 20:41 21 jul 2010
Línea 744:		Línea 744:

	== Descarga Validando campos de Formulario en CRUD ==		== Descarga Validando campos de Formulario en CRUD ==
		+
		+	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. Si haz hecho la practica de CRUD del Wiki, entonces este ejemplo funcionara perfectamente debido a estar asociado a esa practica.
		+
	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'''

← Revisión anterior		Revisión del 20:37 21 jul 2010
Línea 764:		Línea 764:

	[[Categoría:Tutoriales KumbiaPHP]]		[[Categoría:Tutoriales KumbiaPHP]]
−	[[Categoría:jQuery]] .	+	[[Categoría:jQuery]]

← Revisión anterior		Revisión del 20:37 21 jul 2010
Línea 762:		Línea 762:

	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.
		+
		+	[[Categoría:Tutoriales KumbiaPHP]]
		+	[[Categoría:jQuery]] .

@@ Línea 363: / Línea 363: @@
              break;
-             case "cual":
+             case "ninguno":
                  $("#seccion_medico").css("display", "none");
                  $("#seccion_secretaria").css("display", "none");
@@ Línea 504: / Línea 504: @@
                  <span class="comodin">*</span>
                  <select id="soy">
-                     <option selected value="cual">Seleccione...</option>
+                     <option selected value="ninguno">Seleccione...</option>
                      <option value="med">Medico</option>
                      <option value="secre">Secretaria</option>

@@ Línea 342: / Línea 342: @@
      return '<div id="form_alert_'+CampoNombre+'_msg" class="form_alert_msg">'+msg+'</div>';
+}
-function onSelectChange(){
+$(function(){
      $("#soy").change(function(){
          switch($("#soy").val()){
@@ Línea 369: / Línea 369: @@
              break;
+         }
-     })
+     });
+});
 function Limpiar(){
      $("#seccion_medico").css("display", "none");
@@ Línea 502: / Línea 503: @@
              <div class="textos">
                  <span class="comodin">*</span>
-                 <select id="soy" onClick="onSelectChange();">
+                 <select id="soy">
                      <option selected value="cual">Seleccione...</option>
                      <option value="med">Medico</option>
@@ Línea 737: / Línea 738: @@
-'''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.
+'''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 comentarse la function que hace el Display Block o None de las capas div, la función que esta antes de la de function Limpiar(). 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 742: / Línea 742: @@
 == Descarga Validando campos de Formulario con jQuery ==
 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 Validando campos de Formulario en CRUD ==

@@ Línea 686: / Línea 686: @@
 </source>
 Debe llamarse al archivo javascript y al CSS en el Template, que en este caso es el default de KumbiaPHP
@@ Línea 692: / Línea 694: @@
 </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>
 <?php echo javascript_include_tag('jquery'); ?>
@@ Línea 703: / Línea 705: @@
 El código de bienvenida.css
 MIAPP/public/css/bienvenida.css
 Al siguiente código:

@@ Línea 3: / Línea 3: @@
 |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 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.
+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 los 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.

Validando formulario con jQuery 2 - Historial de revisiones

190.74.58.234 en 17:43 23 jul 2010

190.74.58.234 en 17:32 23 jul 2010

J053D: /* Descarga Validando campos de Formulario en CRUD */

J053D: /* Descarga Validando campos de Formulario con jQuery */

J053D en 20:37 21 jul 2010

J053D en 20:37 21 jul 2010

J053D en 20:32 21 jul 2010

J053D en 20:25 21 jul 2010

J053D: Página creada con '{{cleanupbox |image=20px |texto ='''Articulo realizado para Spirit v1.0 beta1.''' }} En KumbiaPHP Framework ya se ha realizado una practi...'

J053D: Página creada con '{{cleanupbox |image=20px |texto ='''Articulo realizado para Spirit v1.0 beta1.'''
}} En KumbiaPHP Framework ya se ha realizado una practi...'