Question

hola a todos, necesito validar que mis campos dinámicos no vayan vacios, por favor ayuda

los recibo de esta manera con javascript

function saveHistory(){

        var inputs = document.getElementsByClassName( 'form-control1' ),
        h1  = [].map.call(inputs, function( input ) {
            return input.value;
        }).join( ', ' );
        var inputs2 = document.getElementsByClassName( 'form-control2' ),
        h2  = [].map.call(inputs2, function( input ) {
            return input.value;
        }).join( ', ' );
        var inputs3 = document.getElementsByClassName( 'form-control3' ),
        h3  = [].map.call(inputs3, function( input ) {
            return input.value;
        }).join( ', ' );
        var inputs4 = document.getElementsByClassName( 'form-control4' ),
        h4  = [].map.call(inputs4, function( input ) {
            return input.value;
        }).join( ', ' );
        var inputs5 = document.getElementsByClassName( 'form-control5' ),
        h5  = [].map.call(inputs5, function( input ) {
            return input.value;
        }).join( ', ' );

if(h1 == "" ){ // Idle mode selected instead of normal mode
            alert("You need h1!");  
            } else{
                    if(h2 == ""){ // c4 report
                      alert("You need h2!"); 
                        } else{
                            if(h3 == ""){ // c4 report
                              alert("You need h3!"); 
                                }
                                else{
                                if(h4 == ""){ // c4 report
                                    alert("You need h4!"); 
                                }
                                    else{
                                    if(h5 == ""){ // c4 report
                                        alert("You need h5!"); 
                                    }

                            else{
        //saveHistorybd(h1,h2,h3,h4,h5)

                    alert("Good");
                        }
                    }
                }
            }
        }

}

cuando solo hay un fila de campos funciona bien, pero al generar mas de uno, ya no lo hace ya que mi código solo esta valorando la primer fila, pero no se como hacer para validar todas las filas en caso que el usuario meta mas de 1, de antemano muchas gracias

Answer 1

Hola @rach, el problema es que tú código no es dinámico, evita usar las estructuras if, else, else if en "piramide", tienes arreglos, objetos y mas estructuras de control a tu disposición en javascript.

veamos, esta es mi idea, que tal si obtienes todos los campos en un contenedor, de esta forma recorres todos esos campos y si alguno tiene un valor vacío, entonces avisamos al usuario.

supongamos que tienes esto:

<div id="campos">
   <input class="form-control" type="text"> <!-- agregado dinamicamente -->
   <input class="form-control" type="text"> <!-- agregado dinamicamente -->
   <input class="form-control" type="text"> <!-- agregado dinamicamente -->
</div>

vamos a seleccionar el contenedor junto con todos los campos con clase form-control

// NOTA: querySelectorAll en IE >= 8
// http://caniuse.com/#feat=queryselector

var campos;

campos = document.querySelectorAll('#campos input.form-control');

y los vamos a recorrer uno a uno, comprobando si estan sin o con un valor invalido.

function validate () {
    var campos, valido;

    // todos los campos .form-control en #campos
    campos = document.querySelectorAll('#campos input.form-control');
    valido = true; // es valido hasta demostrar lo contrario

    // recorremos todos los campos
    [].slice.call(campos).forEach(function(campo) {
        console.log(campo.value.trim());
        // el campo esta vacio?
        if (campo.value.trim() === '') {
            valido = false;
        }
    });

    if (valido) {
        // es valido! procedemos?
    } else {
        // es invalido, que hacemos?
        // alert('invalido! te falta completar campos');
    }
}

Answer 2

¿Y si solo agregas el atributo required a cada input generado dinámicamente?

Nombre: <input type="text" name="nombre" required />

Y mediante JavaScript checas si son válidos:

$('input').on('input', function(e) {
   var isValid = e.target.checkValidity();

   if(isValid) {
       // hacer algo
   } else {
      // hacer otra cosa
   }
});

El evento 'input' se disparará cada vez que se teclea algo en el elemento input. Si quieres que evalúe cuando pierda el foco, puedes hacerlo con blur:

$('input').on('blur', function(e) {
   var isValid = e.target.checkValidity();

   if(isValid) {
       // hacer algo
   } else {
      // hacer otra cosa
   }
});

Demo: http://jsfiddle.net/y66vH/39/