como valido textbox y combobox dinamicos con javascript

[r0xdrig0]

hola amigos, tengo una duda, necesito validar un textbox y un combobox dinamico, es decir tengo un listado de datos en una tabla html (estos datos los traigo desde la bd) en la q tengo un check box en el listado y al seleccionar X checkbox q puede corresponder al producto 1 o el producto 7 etc cualquiera de la lista dme aparece al lado de este checkbox un textbox y un combobox para rellenarlos con la cantidad y el tipo y son estos dos el textbox y el combobox q dfeseo validar q no se ingresen vacios siempre y cuando estos sean seleccionados mediante el check box.

Código Javascript:

function  validacion()
{
 var inputs = document.getElementsByTagName('input');
   
   for(var i = 0; i < inputs.length; ++i)
 
   
      if(inputs[i].type === 'text')
        input elements values get cleared out.
         if(inputs[i].value === '' && inputs[i].disabled != true) 
         {
            alert("DEBE INDICAR LA CANTIDAD DE PRODUCTOS");
           
            //alert(inputs[i].disabled);
             return;
            
         }
 
}
 

tengo esta validacion para validar q el o los textbox seleccionados no esten vacios pero solo me valida q el primer textbox seleccionado no este vacio ya q si selecciono mas textbox solo me valida el primero y no los restantes q seleccione.
como puedo hacerlo para validar los N textbox y combobox seleccionados par q ninguno de estos q hayan sido seleccionados no queden vacios??

de antemamo gracias, quedo atento a sus comentarios

[Alexis88]

Si la cantidad de checkbox será fija, no veo necesidad de crear de manera dinámica a los textbox y combos, basta con que siempre estén ahí, los ocultes desde la hoja de estilos y cuando marques a alguno de los checkbox, muestres al textbox y combo que le corresponda. Luego, cuando vayas a validar que todos los campos de texto de los checkbox marcados no estén vacíos, tomas a los checkbox marcados, creando así un conjunto de elementos sobre el cual puedes iterar con una estructura repetitiva. En cada iteración, tomas al campo de texto que le corresponda al checkbox actual en la iteración y verificas la extensión de su contenido, si esta es falsa o igual a cero (0 equivale a false), muestras un mensaje de alerta, le das el enfoque al campo de texto en cuestión y sales del bucle.

Código HTML:

<form action = "ejemplo.php" onsubmit = "return validacion()">
    <div>
        Opción 1: <input type = "checkbox" id = "1" onclick = "fn(this)" />
        <input type = "text" id = "txt1" />
        <select id = "cmb1">
            <option value = "foo">Foo</option>
            <option value = "bar">Bar</option>
        </select>
    </div>
    <div>
        Opción 2: <input type = "checkbox" id = "2" onclick = "fn(this)" />
        <input type = "text" id = "txt2" />
        <select id = "cmb2">
            <option value = "foo">Foo</option>
            <option value = "bar">Bar</option>
        </select>
    </div>
    <div>
        Opción 3: <input type = "checkbox" id = "3" onclick = "fn(this)" />
        <input type = "text" id = "txt3" />
        <select id = "cmb3">
            <option value = "foo">Foo</option>
            <option value = "bar">Bar</option>
        </select>
    </div>
    <input type = "submit" />
</form>
 

Código CSS:

[id^=txt], [id^=cmb]{
    display: none;
}
 

Código Javascript:

function fn(elem){
    var textbox = document.querySelector("#txt" + elem.id),
        select = document.querySelector("#cmb" + elem.id);
    if (elem.checked){
        textbox.style.display = "block";
        select.style.display = "block";
    }
    else{
        textbox.style.display = "none";
        select.style.display = "none";
    }
}
 
function validacion(){
    var checkbox = document.querySelectorAll("[type=checkbox]:checked"),
        total = checkbox.length;
    for (var i = 0; i < total; i++){
        var textbox = document.querySelector("#txt" + checkbox[i].id);
        if (!textbox.value.length){
            alert("Tienes que ingresar datos en este campo");
            textbox.focus();
            return false;
        }
    }
    return true;
}
 

La función termina retornando el valor true o false, según sea el caso. Si se haya a algún campo de texto vacío, se retorna false, con lo cual paramos al bucle y no enviamos la información del formulario, pero si todos los campos de los checkbox marcados contienen datos, se retorna true y se envía la información del formulario.

Saludos

[r0xdrig0]

graciass alexis probare y te comento

[r0xdrig0]

Alexis88 otra pregunta como lo hago para tb agregar q me valide tambien cuando los combobox tambien esten vacios??? es decir para q no me permita ingresar vacios ni los textbox ni los combobox seleccionados con los checkbox lo probe haciendolo asi

Código Javascript:

function fn(elem){
        var textbox = document.querySelector("#txt" + elem.id),
            select = document.querySelector("#cmb" + elem.id);
        if (elem.checked){
            textbox.style.display = "block";
            select.style.display = "block";
        }
        else{
            textbox.style.display = "none";
            select.style.display = "none";
        }
    }
     
    function validacion(){
        var checkbox = document.querySelectorAll("[type=checkbox]:checked"),
            total = checkbox.length;
        for (var i = 0; i < total; i++){
            var textbox = document.querySelector("#txt" + checkbox[i].id);
            var comboBox = document.querySelector("#cmb" + checkbox[i].id);
            if (!textbox.value.length && !comboBox.value.length){
                alert("Tienes que ingresar datos en este campo");
                textbox.focus();
                return false;
            }
        }
        return true;
    }
 

pero solo me sigue validando q los textbox no esten vacios y los combobox no me valida q no esten vacios, de antemano gracias y quedo atento a tus comentarios slds.

[Alexis88]

Tengo dos preguntas que hacerte:

1. ¿En qué momento llenas a los combos?
2. ¿Por qué no los cargas de datos desde el inicio?

[r0xdrig0]

hola alexis los combos los lleno al igual q los textbox en el momento q q aparecen al cliquear el checkbox y y estos (los combobox deben ser llenados por el usuario de forma obligatoria al igual q los textbox) por lo q no los cargo con datos desde el inicio ya q el usuario debe completarlos, gracias de antemano y quedo atento a tu respuesta slds.

[Alexis88]

En ese caso y ya que veo que estás tomando al combo respectivo en cada iteración, solo te queda verificar si la cantidad de opciones que posee es mayor a cero; de no ser así, se mostrará la alerta.

Código Javascript:

function validacion(){
    var checkbox = document.querySelectorAll("[type=checkbox]:checked"),
        total = checkbox.length;
    for (var i = 0; i < total; i++){
        var textBox = document.querySelector("#txt" + checkbox[i].id),
            comboBox = document.querySelector("#cmb" + checkbox[i].id);
 
        if (!textBox.value.length || !comboBox.options.length){
            alert("Tanto el campo de texto como el combo deben de contener datos");
            if (!textBox.value.length) textBox.focus(); //Solo si la caja está vacía
            return false;
        }
    }
    return true;
}
 

Solo era cuestión de acceder al conjunto de opciones del combo mediante la propiedad options.

[r0xdrig0]

muchas gracias alexis, pero ahora porfa otra duda si es q puedes ayudarme, esta pregunta es, ¿como puedo setear a vacio el combobox y el textbox dinamico si es q el usuario se arrepiente y quita el checked?
espero explicarme bies, quedo atento a tu respuesta de antemano gracias slds.

[Alexis88]

Creo que deberías de empezar a buscar por tu cuenta, ya te he ayudado con más de lo que has pedido inicialmente. Para el campo de texto, solo haz esto:

Código Javascript:

textbox.value = null;
 

Y para el combo, esto:

Código Javascript:

select.innerHTML = null;
 

Todo esto en la función fn y cuando vayas a ocultar a dichos elementos (cuando desmarques al checkbox).

Saludos