0

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.

1 respuesta 1

0

Veo que has basado tu código en mi respuesta a esta pregunta, y has cambiado algunas cosas para adaptarlo a tu html, pero sin éxito.

No ibas mal encaminado, pero debes cambiar estas dos líneas:

$(this).parent().children('ul').children('li').each(function(i, el) {
  if(!$(el).children('input').is(':checked')) {

por estas otras para que te funcione:

$(this).parent().children('ul').each(function(i, el) {
  if(!$(el).children('li').children('input').is(':checked')) {

pues en el condicional no es lo mismo comprobar todos los li.input a la vez (dentro de un ul) que uno a uno como tu hacias. Al hacerlo uno a uno siempre encontrabas casos que hacian que se cumpliera el condicional, que eran los que no estaban marcados dentro del mismo ul.

Aquí dejo un snippet con la corrección:

<!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').each(function(i, el) {
              if(!$(el).children('li').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>

<!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>

2
  • es correcto, en la búsqueda de respuestas, encontré la tuya en la cual traté de basar su funcionamiento, estoy iniciándome con el desarrollo web con bootstrap, javascript, jquery, php y es realmente apasionante. @masterguru, agradezco tu respuesta.
    – Gustavo
    Commented el 27 jun. 2022 a las 20:52
  • Efectivamente lo es :-) Y cuando eso lo tengas dominado verás que solo es la punta del iceberg! Suerte y te animo a continuar aprendiendo! Saludos!
    – masterguru
    Commented el 27 jun. 2022 a las 20:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.