Validando Formulario con jQuery basado en Switch y sentencias If

En la nube existen validadores basados en jQuery y otros no tanto en jQuery, tales ejemplos son el jQuery plugin Validation (que es el que mas he probado), el livevalidation (que tambien lo he probado) y el jQuery.Validaty (que no lo he probado y no se que tan diferente sea con el primero). No se si existan otros, pero con estos que menciono existe un problema que me llevo a buscar otras alternativas de validacion que comento en este post a continuacion.

Los validadores de formulario mencionados tienen una limitación, al indicar que vigilen todos los campos, terminan ofreciendo la utilidad de validar todo o validar nada por igual. Para un formulario donde como requisito deben llenarse todos los campos funciona muy bien. Pero que ocurre cuando tenemos un formulario donde la necesidad va un poco mas alla.

Mi caso consta de un formulario de registro que debe ser llenado por 3 tipos de usuario (Medico, Secretaria y Paciente). Inicialmente muchos campos son llenados por igual por los 3 tipos de usuario, pero luego se presentan otros campos que deben ser llenados dependiendo del tipo de usuario que se haya indicado en una lista <select> previamente a estos campos.

Los validadores jQuery ya comentados tal cual como vienen default ya no son practicos para el caso. Como obviamente 3 tipos de formularios no es la opcion a tomar, debia buscar un codigo que me permitiese validar los campos mediante una sentencia de decision If, donde podria decidir que dato se selecciono en el <select> y en base a ello validar o no esos campos.

La solución la encontré en un articulo del 2008 el cual es este Validando Formulario con jQuery en el que se aprecia claramente la validación de los campos por medio de sentencias If. Simplemente con agregar otras sentencias If para mi caso, podía expandir a una validación algo mas selectiva a sus funciones.

Aun veo que los validadores tienen el problema de no vincular el que los avisos “se quiten” asociado a un botón reset, debe refrescarse la pagina entera para ello.

El siguiente código valida los campos de un formulario mediante sentencias If dando un mejor control sobre la “vigilancia” de los campos de manera un poco mas inteligente a la necesidad. Aun le falta validar que el campo de correo sea realmente un correo (con @ y terminación .domino) al igual que validar que los campos números y de tipo fecha sean tal cual. Pero buscando un poco mas, puede anexarse lo faltante para que esto este presente de igual forma, eso es algo que tengo pendiente y conforme lo tenga, actualizare el código y el ejemplo.

Para ver un ejemplo de todo lo comentado, puedes verlo en este formulario y también puedes descargarlo.

Código del archivo javascript llamado: 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 onSelectChange(){
    $("#soy").change(function(){
        if ($("#soy").val()=="med"){
            $("#seccion_medico").css("display", "block");
        }else{
            $("#seccion_medico").css("display", "none");
        }
        if ($("#soy").val()=="secre"){
            $("#seccion_secretaria").css("display", "block");
        }else{
            $("#seccion_secretaria").css("display", "none");
        }
        if ($("#soy").val()=="pac"){
            $("#seccion_paciente").css("display", "block");
        }else{
            $("#seccion_paciente").css("display", "none");
        }
    })
}
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();
});

Código del HTML llamado: formulario.html

<html>
    <head>
        <title>Validaciones</title>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/validando.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="contenedor">
            <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><input type="text" id="nombre" name="nombre" class="texto" onblur="VerificarCampo(this);" />
                    </div>
                </div>
                <div class="fila">
                    <div class="etiquetas">
                        <label for="cedula">Cedula:</label>
                    </div>
                    <div class="textos">
                        <span class="comodin">*</span><input type="text" id="cedula" name="cedula" class="texto" 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><input type="text" id="confirmar_cedula" name="confirmar_cedula" class="texto" onblur="VerificarCampo(this);" />
                    </div>
                </div>
                <div class="fila">
                    <div class="etiquetas">
                        <label for="telef">Telefono:</label>
                    </div>
                    <div class="textos">
                        <input type="text" id="telef" name="telef" class="texto" onblur="VerificarCampo(this);" />
                    </div>
                </div>
                <div class="fila">
                    <div class="etiquetas">
                        <label for="profesion">Profesion:</label>
                    </div>
                    <div class="textos">
                        <input type="text" id="profesion" name="profesion" class="texto" 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><input type="text" id="usuario" name="usuario" class="texto" onblur="VerificarCampo(this);" />
                    </div>
                </div>
                <div class="fila">
                    <div class="etiquetas">
                        <label for="password">Password:</label>
                    </div>
                    <div class="textos">
                        <span class="comodin">*</span><input type="password" id="clave" name="clave" class="texto" 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><input type="password" id="confirmarpass" name="confirmarpass" class="texto" onblur="VerificarCampo(this);" />
                    </div>
                </div>
                <div class="fila">
                    <div class="etiquetas">
                        <label for="correo">Correo:</label>
                    </div>
                    <div class="textos">
                        <span class="comodin">*</span><input type="text" id="correo" name="correo" class="texto" 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><input type="text" id="confirmarcorreo" name="confirmarcorreo" class="texto" 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" name="soy" onchange="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 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">
                            <input type="text" id="rif_med" name="rif_med" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                    <div class="fila">
                        <div class="etiquetas">
                            <label for="matcolegio">Matricula Colegio:</label>
                        </div>
                        <div class="textos">
                            <input type="text" id="mat_colegio" name="mat_colegio" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                    <div class="fila">
                        <div class="etiquetas">
                            <label for="matsanidad">Matricula Sanidad:</label>
                        </div>
                        <div class="textos">
                            <input type="text" id="mat_sanidad" name="mat_sanidad" class="texto" 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">
                            <input type="text" id="nombre_medico" name="nombre_medico" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                    <div class="fila">
                        <div class="etiquetas">
                            <label for="clavesecretaria">Clave:</label>
                        </div>
                        <div class="textos">
                            <input type="text" id="clave_secretaria" name="clave_secretaria" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                    <div class="fila">
                        <div class="etiquetas">
                            <label for="confirmaclavesecretaria">Otra vez:</label>
                        </div>
                        <div class="textos">
                            <input type="text" id="confirmar_clave_secretaria" name="confirmar_clave_secretaria" class="texto" 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">
                            <input type="text" id="nombre_medico_paciente" name="nombre_medico_paciente" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                    <div class="fila">
                        <div class="etiquetas">
                            <label for="clavepaciente">Clave:</label>
                        </div>
                        <div class="textos">
                            <input type="text" id="clave_paciente" name="clave_paciente" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                    <div class="fila">
                        <div class="etiquetas">
                            <label for="confirmaclavepaciente">Otra vez:</label>
                        </div>
                        <div class="textos">
                            <input type="text" id="confirmar_clave_paciente" name="confirmar_clave_paciente" class="texto" onblur="VerificarCampo(this);" />
                        </div>
                    </div>
                </div>
                <div class="fila">
                    <input type="reset" value="Limpiar" id="boton_limpiar" onClick="Limpiar()"/>
                    <input name="subbtn" id="subbtn" type="submit" value="Enviar" />
                </div>
            </form>
        </div>
    </body>
</html>

Código del CSS para el Formulario llamado: style.css

.titulos
{
    margin          : 10px 0 0 0;
    float           : left;
}

.fila
{
    float           : left;
    width           : 100%;
    margin          : 5px 0 0 10px;
}

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

.textos
{
    width           : 800px;
    float           : left;
}

label.error
{
    color	    : red;
    margin-left	    : 0.5em;
    width	    : 20em;
}

#boton_limpiar
{
    margin          : 10px 0 20px 280px;
}

#secre, #pac
{
    margin          : 20px 0 0 0;
}

#med
{
    margin          : 0;
}

#profesion, #telef
{
    margin          : 0 0 0 13px;
}

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

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

#seccion_medico, #seccion_secretaria, #seccion_paciente
{
    border          : dotted;
    float             : left;
}

Como se ve, es una codificación sencilla basada en sentencias If. Como decía, tengo pendiente el que valide bien los correos (que tengan @ y terminación .dominio) y validación de campos numéricos y fechas, pero inicialmente resolver el validar algunos campos en base a una decisión previa era el caso y practica de este ejemplo.

enjoy!


About this entry