como valido textbox y combobox dinamicos con javascript

[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