funcion con datos dinamicos

Briss · #1 (**permalink**) 16/11/2016, 18:11

Hola a tod@s, estoy tratando de validar radios dinámicos, hago una consulta y genero las preguntas y posibles respuestas, debo tener un mensaje por si falta alguna

Pero no sé, como cambiar esto function validar_form(formulario) {
resultado = '';

validar_rgroup(formulario.nublado);
validar_rgroup(formulario.lloviendo);

Para que los nombres de los grupos de radios no sean fijos

Código HTML:

<script>
var resultado;
function validar_rgroup(rgroup) {
var algo_pinchado;
algo_pinchado = 'no';
for (var i=0; i<rgroup.length; i++) {
if (rgroup[i].checked) {
algo_pinchado = 'si';
break;
}
}

if (algo_pinchado == 'no'){
resultado = resultado + 'Selecciona un valor para la pregunta: ' + rgroup[0].name + '\n';
}
}


function validar_form(formulario) {
resultado = '';

validar_rgroup(formulario.nublado);
validar_rgroup(formulario.lloviendo);
if (resultado != '') {
resultado = 'Debes corregir los siguientes aspectos en tu encuesta: \n' + resultado;
alert(resultado);
return false;
}
}
</script>


</head>
<body>

<form name="form1" method="post" action="" onsubmit="return validar_form(document.form1)">
<p>esta nublado??

<input type="radio" name="nublado" value="poco">
<input type="radio" name="nublado" value="normal">
<input type="radio" name="nublado" value="mucho">
</p>

<p>esta lloviendo??
<input type="radio" name="lloviendo" value="poco">
<input type="radio" name="lloviendo" value="normal">
<input type="radio" name="lloviendo" value="mucho">
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

#2 (**permalink**) 17/11/2016, 06:47

Ve como andas con esto:

Código HTML:

Ver original<script type="text/javascript">
function verif(tipo){
elements = document.getElementsByName(tipo);
    for(var k=0; k<elements.length;k++){
        if(elements[k].checked){
        return true;
        }
    }
return false;
}
 
</script>
 
<form method="post" action="" onsubmit="if(!verif('nublado') || !verif('lloviendo')){ alert('falta dato'); return false; }">
nublado<br/>
poco <input type="radio" name="nublado" value="poco"><br/>
normal <input type="radio" name="nublado" value="normal"><br/>
mucho <input type="radio" name="nublado" value="mucho"><br/>
 
<br/>
<br/>
 
lloviendo<br/>
poco <input type="radio" name="lloviendo" value="poco"><br/>
normal <input type="radio" name="lloviendo" value="normal"><br/>
mucho <input type="radio" name="lloviendo" value="mucho"><br/>
 
<input type="submit" value="go!!" />
 
</form>

Briss · #3 (**permalink**) 17/11/2016, 11:35

Hola

Pero se usa el nombre de los radios

Código HTML:

<form method="post" action="" onsubmit="if(!verif('nublado') || !verif('lloviendo')){ alert('falta dato'); return false; }">

Y estos pueden ser 2, 3, 4, 5...

al ser dinamicos los datos no puedo saber los nombre spara validar, como podría

#4 (**permalink**) 17/11/2016, 12:01

Es mucho más complejo genérico le voy a dar una vuelta a ver si logro algo.

Briss · #5 (**permalink**) 17/11/2016, 12:08

Cita:

Iniciado por alvaro_trewhela

Es mucho más complejo genérico le voy a dar una vuelta a ver si logro algo.

Gracias amigo sigo probando yo tambien

#6 (**permalink**) 17/11/2016, 12:39

Antes de seguir como se genera el formulario

Briss · #7 (**permalink**) 17/11/2016, 13:03

Hola hice estos cambios

Código HTML:

Pregunta 1 : Si <input type="radio" name="qty1" id="qty" /><br>
Pregunta 2 : <input type="radio" name="qty2" id="qty" /><br>
Pregunta 3 : <input type="radio" name="qty3" id="qty" /><br>

<br><br>







    <script type="text/javascript">
window.mensaje= function() {
    var inputs = document.getElementsByTagName('input'),
              
    sum = 0; 
    for(var i=0; i<inputs.length; i++) {
        var ip = inputs[i];
    
        if (ip.name && ip.checked==false) {
           var mensaje= alert( 'Debes Responder todo el Cuestionario');
        }
    
    }
    

}
    </script>
    <button onclick="javascript:mensaje()">Enviar Respuestas</button>
</body>
</html>

Y la Validación a quedado

ahora lo único malo es que si me faltan dos preguntas por responder se muestra el mensaje dos veces (alert), si no contesto ninguna el alert se visualiza 3 veces para este ejemplo... ¿Como hago para que el mensaje solo se vea una vez sin importar el numero de preguntas sin responder????

GRACIAS

#8 (**permalink**) 17/11/2016, 13:21

Ojo con tagname que toma todos tus inputs, si tienes un input submit, te lo tomará como false....

dbes poner el atributo checked a todos los que no están en cuestión...

Además estás cambiando todas las condiciones iniciales, tenías 3 respuestas por pregunta y ahora solo 1 eso lo cambia TODO y sería un cambio muy importante. no entiendo...

Briss · #9 (**permalink**) 17/11/2016, 13:35

Cita:

Iniciado por alvaro_trewhela

Ojo con tagname que toma todos tus inputs, si tienes un input submit, te lo tomará como false....

dbes poner el atributo checked a todos los que no están en cuestión...

Además estás cambiando todas las condiciones iniciales, tenías 3 respuestas por pregunta y ahora solo 1 eso lo cambia TODO y sería un cambio muy importante. no entiendo...

No importa el numero de respuestas ya que quedaran agrupadas por nombre... el punto es validar que ninguna pregunta valla sin responderse... el ultimo código me ha dado buenos resultados, solo que si tuviera 10 preguntas y faltan 5 por responder se mandarían 5 mensajes... ahora trabajo en eso

Saludos

#10 (**permalink**) 17/11/2016, 13:47

ocupa break en el for.

Pero ese no es mi punto, mi punto es que si tienes preguntas con una respuesta anda bien:

Quiero por favor que compares tu código:

Código Javascript:

Ver originalfunction test(){
var inputs = document.getElementsByTagName("input");
    for(var k=0;k<inputs.length;k++){
    ip = inputs[k];
        if(!ip.checked){
        alert("FALTA");
        break;
        }
    }
}

saque el ip.name, no sirve de nada, solo te entrega el nombre del input como cadena, nada más

Y compara eso con

Código HTML:

Ver originalP1 op1<input type="radio" name="p1" /><br/>
P2 op1<input type="radio" name="p2" /><br/>
P3 op1<input type="radio" name="p3" /><br/>
 
<input type="button" onclick="test();" checked value="test"/>

Luego con esto

Código HTML:

Ver originalP1 op1<input type="radio" name="p1" /> op2<input type="radio" name="p1" /><br />
P2 op1<input type="radio" name="p2" /> op2<input type="radio" name="p2" /><br />
P3 op1<input type="radio" name="p3" /> op2<input type="radio" name="p3" /><br />
 
<input type="button" onclick="test();" checked value="test"/>

Veras que es distinto....

La razon es que con 2 o + opciones siempre habrá un input no checkeado

Briss · #11 (**permalink**) 17/11/2016, 16:02

CIERTO

cuando hay dos respuesta sigue marcando que falta

mpozo · #12 (**permalink**) 17/11/2016, 17:19

Añade un <label> a cada grupo. Obten la cantidad de <label> que hay para saber cuantos radio han de estar marcados. Si el número de label es distinto al número de radio, es que alguno/s no están marcados

Briss · #13 (**permalink**) 17/11/2016, 17:56

Cita:

Iniciado por mpozo

Añade un <label> a cada grupo. Obten la cantidad de <label> que hay para saber cuantos radio han de estar marcados. Si el número de label es distinto al número de radio, es que alguno/s no están marcados

Pero como obtenga el total de radios seleccionados

mpozo · #14 (**permalink**) 18/11/2016, 07:52

Es algo como esto

Código Javascript:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
 
        </style>
        <script>
 
        </script>
    </head>
    <body>
 
        <form method="post" action="" id="f">
 
            <label for="nublado">nublado</label><br/>
            poco <input type="radio" name="nublado" value="poco"><br/>
            normal <input type="radio" name="nublado" value="normal"><br/>
            mucho <input type="radio" name="nublado" value="mucho"><br/>
             
            <br/>
            <br/>
             
            <label for="lloviendo">lloviendo</label><br/>
            poco <input type="radio" name="lloviendo" value="poco"><br/>
            normal <input type="radio" name="lloviendo" value="normal"><br/>
            mucho <input type="radio" name="lloviendo" value="mucho"><br/>
 
            <br/>
            <br/>
 
            <label for="llovi">llovi</label><br/>
            poco <input type="radio" name="llovi" value="poco"><br/>
            normal <input type="radio" name="llovi" value="normal"><br/>
            mucho <input type="radio" name="llovi" value="mucho"><br/>
 
            <input type="submit" id="s" value="go!!" />
         
        </form>
 
 
        <script>
        document.querySelector('#f').addEventListener('submit', function(event) {validaData(event)});
 
        function validaData(evt) {
 
            var labels = document.querySelectorAll('form label').length,
            check = 0;
 
            [].forEach.call(document.querySelectorAll('form input[type="radio"]'), function(e) {
 
                if (e.checked) ++check;
            });
 
            if (labels > check) {
 
                evt.preventDefault();
                console.log('rellena todos los grupos');
 
            }
        }
        </script>
    </body>
</html>

Briss · #15 (**permalink**) 18/11/2016, 09:53

Gracias amigo lo estoy adecuando

Briss · #16 (**permalink**) 18/11/2016, 10:43

Ultima pregunta no sé mucho de javascript, ¿Por qué si subo el script antes del formulario no funciona? quizá sea una pregunta "tonta" pero me quede con esa duda

mpozo · #17 (**permalink**) 18/11/2016, 16:47

Es porque el dom no está cargado. Para poder colocar el javascript en el head, has de usar DOMContentLoaded o load https://developer.mozilla.org/es/doc...MContentLoaded