Simplificar la funcion

[alexisverano]

Hola amigos,

Tengo esta funcion en ajax que me verifica el llenado de los objetos dentro de la pagina, son una lista listas y dos cajas de textos, y al dar al boton enviar si existe alguno sin contenido los marca con el borde en rojo, como solo eran tres elementos, lo hice de esta forma.
Ahora se requiere incorporar muchos mas datos (apellidos, sexo, direcciones, etc...) serian casi 20 objetos, entre listas, cajas de textos, botones de opcion y hasta checkbox.

Mi pregunta puedo simplificar la validacion de los objetos para que cuando existan los obligatorios (por que no todos son obligatorios) vacios me los marque en rojo?, como ya dije van a existir como tres o cuatro que no son obligatorios. Y no tener que tener uno por uno como les muestro abajo?

Código Javascript:

function update() { 
 
vacio = "1px #F00 solid";
campovacio = 0;
 
 
if(document.getElementById("obj_departamento").value == ""){ 
    document.getElementById("obj_departamento").style.border = vacio; 
    campovacio=campovacio+1;
    }else{ document.getElementById("obj_departamento").style.border = ""; }
    
if(document.getElementById("obj_nombre").value == ""){ 
    document.getElementById("obj_nombre").style.border = vacio; 
    campovacio=campovacio+1;
    }else{ document.getElementById("obj_nombre").style.border = ""; }
    
if(document.getElementById("obj_ci").value == ""){ 
    document.getElementById("obj_ci").style.border = vacio; 
    campovacio=campovacio+1;
    }else{ document.getElementById("obj_ci").style.border = ""; }
 
 
if(campovacio != 0){ 
    alert ("Los campos señalados en rojo son de caracter obligatorio."); return; 
}
 
........... continua el proceso del fichero ajax ....
 
    ajax = objetoAjax();
    ajax.open("POST", "updates.php");
 
                   .........
 
}
 

Saludos y gracias...

[IsaBelM]

a aquellos controles que no pueden estar vacíos, añádele un class. es recomendable que el selector exista en el css, así que asignale alguna propiedad que no afecte estéticamente al control.
por otro lado, y esta es la parte javascript, usa querySelectorAll() para obtener la colección de elementos, recorres la colección y validas si el control está o no está vacío

[alexisverano]

Iniciado por IsaBelM

a aquellos controles que no pueden estar vacíos, añádele un class. es recomendable que el selector exista en el css, así que asignale alguna propiedad que no afecte estéticamente al control....

No entiendo esta parte. Me puedes ayudar un poco.
Gracias!!!

[IsaBelM]

algo así

<input type="text" ........ class="no_vacio" />
<input type="text" ..................................../> <!-- puede estar vacio ->

.no_vacio {
propiedad : valor;
}

[Italico76]

Trata de evitar hacer esto:

Código Javascript:

if(document.getElementById("obj_nombre").value == ""){ 
    document.getElementById("obj_nombre").style.border = vacio; 
    campovacio=campovacio+1;
    }else{ document.getElementById("obj_nombre").style.border = ""; }
 

Es muy ineficiente recorrer el DOM para extraer lo mismo una y otra vez! .... es mejor asi:

Código Javascript:

obj = document.getElementById("obj_nombre");
if(obj.value == ""){ 
    obj.style.border = vacio; 
    campovacio++;
}else
    obj.style.border = "";
 

[alexisverano]

Gracias "Italico76"

Tienes alguna idea de como implementar esto para 18 elementos que son obligatorios sin tener que repetir lo mismo para cada uno, teniendo en cuenta que habran de 3 a 5 objetos que no seran obligatorios.

[Italico76]

Algo asi:

Código Javascript:

<div id="obj_nombre" value="dd">A</div>
<div id="obj_departamento" value="">B</div>
<div id="obj_ci" value="">C</div>
 
<script>
vacio = "1px #F00 solid";
// ...
 
var campovacio=0;
var objetos = new Array;
var objetos = ["nombre","departamento","ci"];
 
for (var i=0;i<objetos.length;i++)
{
    var obj = document.getElementById("obj_"+objetos[i]);   
    if (obj.getAttribute('value') == "undefined" || obj.getAttribute('value') == "")
    {       
        obj.style.border = vacio; 
        campovacio++;
    }else
        obj.style.border = ""; 
}    
 
</script>
 

Si son requeridos... yo les pondria el atribute "required" ...

A proposito... para los SELECT OPTIONS... hice algo:

Código Javascript:

<!--
    Validar si los SELECT..OPTIONs tienen opciones seleccionadas
    es una implementacion de required
    
    Si hay una primera opcion del tipo "Seleccione su ciudad",etc
    debe llevar la clase 'ignored'
 
-->
 
<script>
/*
    @author Pablo Bozzolo
    @param null
    @return boolean 
*/
function selectRequiredValidate()
{
    selects = document.getElementsByTagName('SELECT');
    
    selected=0; 
    required_selects = 0;
    for (var k=0;k<selects.length;k++)
    {       
        sel = selects[k];
        if (sel.getAttribute('class')=='required')
        {
            required_selects++;
            this_selected=false;
            for (ix=0;ix<sel.length;ix++)       
            {               
                option = sel[ix];                                               
                    if ((option.selected) && (option.getAttribute('class')!='ignored'))
                        this_selected=true;
                        
            }   
            
            if (this_selected)  
                selected++;
        }                   
    }
    
    return (selected==required_selects);                
}   
 
</script>
 
    <input type="text" name="nombres" value="Juan" class="required"/><p/> 
 
    <select name="departamento[]" class="required" >
        <option value="" class="ignored">Selecciona depto</option"> 
        <option value="Bogota DC">Bogota DC</option"> 
        <option value="Antioquia">Antioquia</option"> 
        <option value="Caldas" selected>Caldas </option"> 
        <option value="Quindio" >Quindio</option">  
    </select> 
    
    <label>Inquietudes medio-ambientales:</label><p/>
    <!-- SELECT...OPTIONs -->   
    <select name="departamento[]" multiple class="required">
        <option value="" class="ignored">Selecciona</option"> 
        <option value="Hg" selected="selected">Mercurio en las aguas</option"> 
        <option value="CO2">Emision de CO2</option"> 
        <option value="deforestacion" selected="selected">Deforestacion</option"> 
        <option value="otras" selected="selected">Otras</option">   
    </select> 
    <p/>   
    
<script>    
    console.log(selectRequiredValidate());
</script>
 

[alexisverano]

Seria igual para el manejo de los checkbox y grupo de opciones, que el que aplicastes para los select options?

Gracias por el aporte, lo estoy probando y funciona perfecto.
Ahora se lo aplicare al los options.

[Alexis88]

A esos 18 elementos, añádeles una clase en particular, por ejemplo:

Código HTML:

<input type = "text" name = "foo" class = "requerido" />
 

Luego, solo es cuestión de que tomes al conjunto de elementos que poseen dicha clase y los valides:

Código Javascript:

var formulario = document.getElementById("id_formulario"),
    requeridos = formulario.getElementsByClassName("requerido"),
    total = requeridos.length;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault();
 
    var enviar = true;
 
    for (var i = 0; i < total; i++)
        if (!requeridos[i].value.length){
            alert ("Debe completar el campo " + requeridos[i].name);
            requeridos[i].focus();
            enviar = false;
            break;
        }
 
    if (enviar) this.submit();
}, false);
 

Cuando se produzca el evento submit, es decir, cuando envíes los datos del formulario para procesarse, cancelas dicho evento con el método preventDefault, tomas a los elementos del formulario con la clase requerido, calculas el total de estos y declaras una variable que utilizarás como comodín para determinar si enviarás o no los datos para su procesamiento, iniciando esta variable con el valor booleano true. Enseguida, iteras el conjunto de elementos requeridos y si alguno de ellos no tuviera contenido, muestras una alerta indicándole al usuario que debe completar el campo en cuestión, le das el enfoque, cambias el valor del comodín a false y sales del bucle. Finalmente, evalúas el valor del comodín, si sigue siendo true, es decir, si no se encontraron elementos sin completas, envías los datos a procesarse.

También puedes hacerlo de una manera más corta:

Código Javascript:

var formulario = document.getElementById("id_formulario"),
    requeridos = formulario.getElementsByClassName("requerido"),
    map = Array.prototype.map;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault();
 
    var enviar = map.call(requeridos, function(elemento){
        return elemento.value.length;
    }).indexOf(0);
 
    if (enviar == -1) this.submit();
}, false);
 

En este caso, creas un array con la longitud de los valores de cada campo, a los cuales iteras con el método Array.prototype.map que es el equivalente de map() en PHP y al igual que dicha función, aplica una llamada de retorno a cada elemento del array en cuestión que en este caso es el conjunto de elementos requeridos. Luego, con el método indexOf buscas en el array resultante el valor 0 para saber así si algún elemento no tiene contenido. Finalmente, evalúas el resultado de lo anterior, si es igual a -1, es decir, si no se encontraron coincidencias, lo cual indica que todos los campos se completaron, envías los datos a procesarse.

Saludos

[Italico76]

Tiene razon @Alexis88 ... cometi el error de querer "enmendar" tu codigo pero NO ES LA FORMA!


La forma correcta es con una clase del tipo "required" que ademas sera compatible con el codigo que te pase para los SELECT..OPTIONS

[Alexis88]

Para el tema de los bordes, puedes hacerlo como indico en esta respuesta, sin embargo, con HTML5 y CSS3 puedes realizar este proceso. A los campos, añádeles el atributo required y en la hoja de estilos, crea la pseudo-clase :invalid, la cual se encargará de añadir el color del borde. Lee la documentación de esta pseudo-clase, la cual se encuentra en el enlace adjunto, tiene ejemplos.

Saludos

[IsaBelM]

lo que referí, con la salvedad de usar map(), :required y :invalid por aquello del crossbrowser

[Alexis88]

Iniciado por IsaBelM

lo que referí, con la salvedad de usar map(), :required y :invalid por aquello del crossbrowser

Por eso dije esto:

Iniciado por Alexis88

sin embargo, con HTML5 y CSS3...

Y claro, el problema con algunos de los nuevos métodos es que no son soportados en navegadores viejos, por lo que en esos caso hay que echar mano de bucles tradicionales y cambios de estilos de manera manual, pero creo que hay que ir apuntando al estándar actual y a que los usuarios se actualicen, porque aunque sea algo importante, no veo mucho futuro a la creación de aplicaciones pensando en que el usuario siga con IE6 u 8.

Saludos

[IsaBelM]

alexis, esta es una discusión que se ha mantenido en este foro infinidad de ocasiones. y siempre se ha llegado a la disyuntiva; uso los nuevos estandares y añado polyfil o uso los estadares antiguos?? mi opinión es que aún hoy en día, por desgracia, hay que tener en cuenta a ie8

[Alexis88]

Y en otros foros también , pero es una opinión personal, a pesar de que yo también sigo elaborando aplicaciones pensadas hasta en IE6, igual, creo que esta forma de trabajo debe de cambiar y se debe instar a los usuarios a actualizar sus navegadores, en la medida de lo posible.

Saludos

[jp91]

En cierta medida @Alexis88 tiene razon las nuevas generaciones traen cosas interesantes pero tal como dice @IsabelM por desgracia no hay opcion en este trabajo el cliente tiene la razon y si un sponsor quiere que funcione en un navegador tipo dinosaurio pues toca jejejejej. Todo es un equilibrio amigos :)