Validando formulario con jQuery 2

{{#if: |}}

{{#if:

|}}

Articulo realizado para Spirit v1.0 beta1.

{{{imageright}}}

En KumbiaPHP Framework ya se ha realizado una practica sobre la validación de campos de formulario bajo jQuery llamado 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.

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

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(){
    $("#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 "ninguno":
                $("#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();
});

• Vista: registro.phtml

miapp/views/usuarios/registro.phtml

<?php View::content(); ?>
<div id="contenedor">
    <?php echo form_tag('usuarios/registro'); ?>
    <!-- <form id="formulario" method="post" action="#" onSubmit="return ChequearFormulario(this);" > -->
        <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">
                    <option selected value="ninguno">Seleccione...</option>
                    <option value="med">Medico</option>
                    <option value="secre">Secretaria</option>
                    <option value="pac">Paciente</option>
                </select>
            </div>
        </div>
        <!--
        <div class="titulos">
            <h3>Llenar acorde al tipo de usuario seleccionado</h3>
            <p>Los siguientes campos son requeridos en base al tipo de usuario indicado previamente.</p>
        </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>

• Un CSS para el formulario: formreg.css

miapp/public/css/formreg.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;
}

Cargando jQuery y la validación que hemos escrito para los campos del formulario basados en jQuery: miapp/views/templates/default.phtml

Debe llamarse al archivo javascript y al CSS en el Template, que en este caso es el default de KumbiaPHP

<?php echo stylesheet_link_tag('formreg') ?>

<?php echo javascript_include_tag('jquery'); ?>
<?php echo javascript_include_tag('validando'); ?>

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:

#footer {
    background-color: #8A6F5C;
    border-top: 4px solid #555555;
    color: white;
    padding: 1em;
    height: 50px;
}

Le agregamos un par de lineas:

#footer {
    background-color: #8A6F5C;
    border-top: 4px solid #555555;
    color: white;
    padding: 1em;
    height: 50px;
    /***************/
    float: left;
    width: 98%;
    /***************/
}

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

Descarga Validando campos de Formulario con jQuery

Descarga: app_valform.zip para el core del beta1 de Spirit v1.0

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 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: 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:

[development]
host = localhost
username = root
password = 123
name = test
type = mysql

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