Buen día, estoy generando un formulario tipo likert el cual va a contener muchos inputs de tipo radio, pero no logro validar los inputs, ya que están segmentados en por filedsets, utilizó jQuery para los eventos de los botones para avanzar y regresar y en la clase "form_siguiente" trato de validar, pero creo que estoy recorriendo mal el DOM.
Es importante mencionarles que estoy usnado el framework de bootstrap, que los inputs forman parte de una lista y este a su vez de un elemento tipo card, por lo que creo que ahí es donde me estoy perdiendo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Estimación Deontológica</title>
<style>
html,body {
padding:0;
margin:0;
}
.card-body{
padding: .20rem .20rem !important;
}
#frm_registro fieldset:not(:first-of-type) {
display: none;
}
.caja {
font-size: 16px;
margin-top: 10px;
}
form .enunciado {
display:block;
padding: 5px 0 0 1%;
margin-bottom: 5px;
}
form .likert {
list-style:none;
width:100%;
margin:0;
padding:2px 0px;
display:block;
background-color: #efefef;
}
form .likert li {
display:inline-block;
width:16%;
text-align:center;
vertical-align: top;
}
form .likert li input[type=radio] {
display:block;
position:relative;
top:0;
left:160%;
margin-left:-10px;
}
form .likert li label {width:100%;}
</style>
</head>
<body>
<div class="container">
<div id="alertaerror" class="alert alert-warning mt-1" role="alert">
<h5 class="alert-heading">Aviso!</h5>
<p>Todos los campos son obligatorios, favor de revisar las respuestas!</p>
</div>
<div class="card mt-1">
<div id="enchead" class="card-header ">
<strong>Selecciona la primera impresión que te causa leer las siguientes palabras o frases</strong>
</div>
<div class="row align-items-center text-center g-0" style="background:#0077c8; color:#fff; height: 55px;">
<div class="col-2 offset-2">Muy Agradable</div>
<div class="col-2" >Agradable</div>
<div class="col-2">Indiferente</div>
<div class="col-2">Desagradable</div>
<div class="col-2">Muy desagradable</div>
</div>
<div class="card-body">
<form id="frm_registro" action="valida.php" method="post">
<fieldset id="fldset-1">
<label class="enunciado">Evaluación de mis funciones por la ciudadanía</label>
<ul class='likert'>
<li> <input type="radio" name="s4p01" class="form-check-input" id="s4p011" value="2"></li>
<li> <input type="radio" name="s4p01" class="form-check-input" id="s4p012" value="1"></li>
<li> <input type="radio" name="s4p01" class="form-check-input" id="s4p013" value="0"></li>
<li> <input type="radio" name="s4p01" class="form-check-input" id="s4p014" value="-1"></li>
<li> <input type="radio" name="s4p01" class="form-check-input" id="s4p015" value="-2"></li>
</ul>
<label class="enunciado">Ser decidido</label>
<ul class='likert'>
<li> <input type="radio" name="s5p01" class="form-check-input" id="s5p011" value="2"></li>
<li> <input type="radio" name="s5p01" class="form-check-input" id="s5p012" value="1"></li>
<li> <input type="radio" name="s5p01" class="form-check-input" id="s5p013" value="0"></li>
<li> <input type="radio" name="s5p01" class="form-check-input" id="s5p014" value="-1"></li>
<li> <input type="radio" name="s5p01" class="form-check-input" id="s5p015" value="-2"></li>
</ul>
<label class="enunciado">Asumir responsabilidades del cargo</label>
<ul class='likert'>
<li> <input type="radio" name="s4p02" class="form-check-input" id="s4p021" value="2"></li>
<li> <input type="radio" name="s4p02" class="form-check-input" id="s4p022" value="1"></li>
<li> <input type="radio" name="s4p02" class="form-check-input" id="s4p023" value="0"></li>
<li> <input type="radio" name="s4p02" class="form-check-input" id="s4p024" value="-1"></li>
<li> <input type="radio" name="s4p02" class="form-check-input" id="s4p025" value="-2"></li>
</ul>
<label class="enunciado">Tomar decisiones</label>
<ul class='likert'>
<li> <input type="radio" name="s5p02" class="form-check-input" id="s5p021" value="2"></li>
<li> <input type="radio" name="s5p02" class="form-check-input" id="s5p022" value="1"></li>
<li> <input type="radio" name="s5p02" class="form-check-input" id="s5p023" value="0"></li>
<li> <input type="radio" name="s5p02" class="form-check-input" id="s5p024" value="-1"></li>
<li> <input type="radio" name="s5p02" class="form-check-input" id="s5p025" value="-2"></li>
</ul>
<label class="enunciado">Declarar</label>
<ul class='likert'>
<li> <input type="radio" name="s4p03" class="form-check-input" id="s4p031" value="2"></li>
<li> <input type="radio" name="s4p03" class="form-check-input" id="s4p032" value="1"></li>
<li> <input type="radio" name="s4p03" class="form-check-input" id="s4p033" value="0"></li>
<li> <input type="radio" name="s4p03" class="form-check-input" id="s4p034" value="-1"></li>
<li> <input type="radio" name="s4p03" class="form-check-input" id="s4p035" value="-2"></li>
</ul>
<input type="button" name="next" class="form_siguiente btn btn-primary caja" value="Siguiente">
</fieldset>
<fieldset id="fldset-2">
<label class="enunciado">Firmeza en los propósitos</label>
<ul class='likert'>
<li> <input type="radio" name="s5p03" class="form-check-input" id="s5p031" value="2"></li>
<li> <input type="radio" name="s5p03" class="form-check-input" id="s5p032" value="1"></li>
<li> <input type="radio" name="s5p03" class="form-check-input" id="s5p033" value="0"></li>
<li> <input type="radio" name="s5p03" class="form-check-input" id="s5p034" value="-1"></li>
<li> <input type="radio" name="s5p03" class="form-check-input" id="s5p035" value="-2"></li>
</ul>
<label class="enunciado">Perseverancia</label>
<ul class='likert'>
<li> <input type="radio" name="s5p04" class="form-check-input" id="s5p041" value="2"></li>
<li> <input type="radio" name="s5p04" class="form-check-input" id="s5p042" value="1"></li>
<li> <input type="radio" name="s5p04" class="form-check-input" id="s5p043" value="0"></li>
<li> <input type="radio" name="s5p04" class="form-check-input" id="s5p044" value="-1"></li>
<li> <input type="radio" name="s5p04" class="form-check-input" id="s5p045" value="-2"></li>
</ul>
<input type="button" name="previous" class="form_anterior btn btn-warning caja" value="Anterior"/>
<input type="button" name="next" class="form_siguiente btn btn-primary caja" value="Siguiente">
</fieldset>
<fieldset id="fldset-3">
<label class="statement">Atender las disposiciones jurídicas</label>
<ul class='likert'>
<li> <input type="radio" name="s4p04" class="form-check-input" id="s4p041" value="2"></li>
<li> <input type="radio" name="s4p04" class="form-check-input" id="s4p042" value="1"></li>
<li> <input type="radio" name="s4p04" class="form-check-input" id="s4p043" value="0"></li>
<li> <input type="radio" name="s4p04" class="form-check-input" id="s4p044" value="-1"></li>
<li> <input type="radio" name="s4p04" class="form-check-input" id="s4p045" value="-2"></li>
</ul>
<label class="statement">Cumplir con las atribuciones del puesto</label>
<ul class='likert'>
<li> <input type="radio" name="s4p05" class="form-check-input" id="s4p051" value="2"></li>
<li> <input type="radio" name="s4p05" class="form-check-input" id="s4p052" value="1"></li>
<li> <input type="radio" name="s4p05" class="form-check-input" id="s4p053" value="0"></li>
<li> <input type="radio" name="s4p05" class="form-check-input" id="s4p054" value="-1"></li>
<li> <input type="radio" name="s4p05" class="form-check-input" id="s4p055" value="-2"></li>
</ul>
<input type="button" name="previous" class="form_anterior btn btn-warning caja" value="Anterior"/>
<input type="submit" name="submit" class="submit btn btn-success caja" value="Enviar Respuestas">
</fieldset>
</form>
</div> <!-- Card Body -->
</div> <!-- Card -->
</div> <!-- Contenedor -->
<script>
$(document).ready(function() {
$("#alertaerror").hide();
var numforms = 1,
f_anterior, f_siguiente, total_forms;
total_forms = $("fieldset").length;
$(".form_siguiente").click(function() {
let todos = true
$(this).parent().children('ul').children('li').each(function(i, el) {
if(!$(el).children('input').is(':checked')) {
todos = false
}
})
if(todos){
f_anterior = $(this).parent();
f_siguiente = $(this).parent().next();
f_siguiente.show();
f_anterior.hide();
}else{
$('#alertaerror').fadeTo(1500, 500).slideUp(1000, function() {
$('#alertaerror').slideUp(1000);
});
}
});
$(".form_anterior").click(function() {
f_anterior = $(this).parent();
f_siguiente = $(this).parent().prev();
f_siguiente.show();
f_anterior.hide();
});
$("#frm_registro").submit(function(event) {
if (!$('input[name="s4p04"]').is(':checked') || !$('input[name="s4p05"]').is(':checked')) {
$('#alertaerror').fadeTo(1500, 500).slideUp(1000, function() {
$('#alertaerror').slideUp(1000);
});
return false;
} else {
return true;
}
});
});
</script>
</body>
</html>
Como podrán apreciar, mando abrir una ventana tipo Alert de Bootsrap, que creo que funciona adecuadamente.
Finalmente, la salida la enviaré aun archivo PHP para validar antes de almacenar en la base de datos.
Llevo algunos días con el tema y haciendo el recorrido desde la consola sin éxito, quizá ses algo minúsculo, apreciaré su ayuda y también me recomeienden literatura y un buen curso de Javascript y JQuery para avanzar en este tema y también apoyar a la comunidad, muchas gracias.