entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Validar que no vayan campos vacios con javascript sobre campos dinámicos

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

2 Respuestas

1voto

white Puntos75880

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');
    }
}

3votos

GusGarsaky Puntos5480

¿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/

1voto

white comentado

Muy buena idea al utilizar la api de html5 como método para validar, agrego que si los campos no estan dentro de un formulario se puede usar input.checkValidity() para determinar si un campo es valido. (en este caso required).

0voto

cobasESP comentado

Este método es mucho mas sencillo que el de la primera respuesta, hay que aprovechar la api de html5 que luego nadie la usa.

0voto

rach comentado

Hola cobasESP lo primero que me vino a la mente fue solucionarlo asi, pero no me funciona, aunque lo ponga como required no lo hace, ignoro porq, saludos!! intentare con la otra respuesta y les cuento como me fue

0voto

white comentado

Es posible que tus campos no esten dentro de un formulario, necesitas un formulario y disparar el evento submit de este.

cuando quieras validar debes disparar ese evento, asi funciona la validación de formularios en html5.

document
    .forms
    .namedItem('nombre-form')
    .addEventListener('submit', function () {
        return false;
    });

0voto

GusGarsaky comentado

@rach. Si estás dentro de un formulario, al utilizar required el formulario no permitirá el submit si es que hay campos que no están poblados. No necesitas código JavaScript.

En caso los campos no estén dentro de un form (como es el caso en el fiddle que te dejé), debes utilizar controlrequerido.checkValidity() sobre cada input marcado como required. Esto, como te puse en mi respuesta, puedes hacerlo mediante eventos 'input' o 'blur' o el que tú desees.

0voto

rach comentado

Hola @iMitsu el problema es que no los mando con el método submit, lo que hago es que con un botón entra a una función en javascript, recibo los valores y luego los mando a una página php para procesar los datos sin refrescar la página,

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta