0

Como agregar la validación en cada click en el botón de siguiente, actualmente está hasta el botón submit, pero el formulario real crecerá con al menos 10 fieldsets y varios inputs de tipo radio todos y, sería poco eficiente validar hasta enviar el formulario y tener que el usuario regrese hasta el fieldset con el input no seleccionado.

Por su ayuda, gracias.

< script >
      $(document).ready(function() {
        $("#alertaerror").hide();

        var numforms = 1,
          f_anterior, f_siguiente, total_forms;
        total_forms = $("fieldset").length;

        $(".form_siguiente").click(function() {
          f_anterior = $(this).parent();
          f_siguiente = $(this).parent().next();
          f_siguiente.show();
          f_anterior.hide();
        });

        $(".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="radio1"]').is(':checked') || !$('input[name="radio2"]').is(':checked') || !$('input[name="radio3"]').is(':checked')) {
            $('#alertaerror').fadeTo(1500, 500).slideUp(1000, function() {
              $('#alertaerror').slideUp(1000);
            });
            return false;
          } else {
            return true;
          }
        });

      }); <
    /script>

Con este código funciona la validación hasta el submit, y considero que hacerlo en cada Filedset es lo mejor para el usuario, de momento no logro hacerlo, estoy iniciandome con Javascript y JQuery y me sigo documentando, esta es mi primer pregunta en el sitio. el formulario base es el siguiente:

    <html>    
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
   <style>
    #frm_registro fieldset:not(:first-of-type) {
    display: none;
    }
    div  {
    padding: 30px 0px 30px;
    }
   </style>
   </head>
   <body>
    <form id="frm_registro" action="valida.php" method="post">
          <fieldset id="fldset-1">
            <div>
              <input type="radio" id="html" name="languajefav" value="HTML">
              <label for="html">HTML</label><br>
              <input type="radio" id="javascript" name="languajefav" value="JavaScript">
              <label for="javascript">JavaScript</label>
            </div>
            <div>
              <input type="radio" id="ie" name="navegador" value="Internet Explorer">
              <label for="ie">Internet Explorer</label><br>
              <input type="radio" id="mf" name="navegador" value="Mozilla Firefox">
              <label for="javascript">Mozilla Firefox</label>
            </div>
            <input type="button" name="next" class="form_siguiente" value="Siguiente">
          </fieldset>
          <fieldset id="fldset-2">
            <div>
              <input type="radio" id="mysql" name="bdfavorita" value="MySQL">
              <label for="mysql">MySQL</label><br>
              <input type="radio" id="mssql" name="bdfavorita" value="SQL Server">
             <label for="mssql">SQL Server</label><br>
            </div>
            <input type="button" name="previous" class="form_anterior" value="Anterior"/>
            <input type="button" name="next" class="form_siguiente" value="Siguiente">
          </fieldset>
          <fieldset id="fldset-3">
            <div>
              <input type="radio" id="sublime" name="editorfav" value="Sublime Text">
              <label for="sublime">Sublme Text 3</label><br>
              <input type="radio" id="vstudio" name="editorfav" value="Visual Studio">
              <label for="vstudio">Visual Studio</label><br>    
            </div>
            <input type="button" name="previous" class="form_anterior" value="Anterior"/>
            <input type="submit" name="submit" class="submit" value="Enviar Respuestas">    
          </fieldset>
        </form>
    </body>
    </html>

Y aquí el código base funcionando https://jsfiddle.net/fherhuitron/a52syg36/4/

4
  • No se si entiendo tu pregunta. Dices que la validación la tienes en el submit pero que quieres ponerla en el next, o sea, a mi entender, dentro de $(".form_siguiente").click(function() {... pues hazlo... ¿cual es el problema?
    – masterguru
    Commented el 14 jun. 2022 a las 23:16
  • @masterguru El problema es como seleccionar solo los inputs de cada fieldset para validarlos. Commented el 14 jun. 2022 a las 23:39
  • No lo se, no veo los inputs ni las clases que usan, ni si puede hacerse un $('.fieldset1').each() para los del primer fieldset, $('.fieldset2').each() para los del segundo fieldset, etc... No se como construyes los fieldsets que dices, pero supongo que captas la idea del each asociado a una clase distinta para cada fieldset, no?
    – masterguru
    Commented el 15 jun. 2022 a las 0:13
  • @masterguru Ya agregue un fieldset, en los siguiente, se agrega el botón de anterior y en el último el botón de submit, este sería la base. Commented el 15 jun. 2022 a las 1:05

2 respuestas 2

1

Espero te ayude era muy simple, solo validar los campos en cada vez que se le da siguiente. suponiendo que eso era lo que necesitabas.

$(document).ready(function() {
  $("#alertaerror").hide();
  var numforms = 1,
    f_anterior, f_siguiente, total_forms;
  total_forms = $("fieldset").length;

  $(".form_siguiente").click(function() {
    if($(this).parent().children('div').children('input').is(':checked')){
        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="editorfav"]').is(':checked')) {
      $('#alertaerror').fadeTo(1500, 500).slideUp(1000, function() {
        $('#alertaerror').slideUp(1000);
      });
      return false;
    } else {
      return true;
    }
  });
});
#frm_registro fieldset:not(:first-of-type) {
                display: none;
            }
            div  {
                padding: 30px 0px 30px;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="alertaerror">
            Todas los campos son obligatorios, favor de completar todas las respuestas!
        </div>

        <div>
            <form id="frm_registro"  action="valida.php" method="post">
                <h2>Encuesta de Lenguajes, Bases y Editores</h2>
                <fieldset id="fldset-1">
                    <div>
                        <input type="radio" id="html" name="languajefav" value="HTML">
                        <label for="html">HTML</label><br>
                        <input type="radio" id="javascript" name="languajefav" value="JavaScript">
                        <label for="javascript">JavaScript</label> 
                    </div>
                        <input type="button" name="next" class="form_siguiente" value="Siguiente">
                </fieldset>
                <fieldset id="fldset-2">
                    <div>
                        <input type="radio" id="mysql" name="bdfavorita" value="MySQL">
                        <label for="mysql">MySQL</label><br>
                        <input type="radio" id="mssql" name="bdfavorita" value="SQL Server">
                        <label for="mssql">SQL Server</label><br>
                    </div>
                        <input type="button" name="previous" class="form_anterior" value="Anterior"/>
                        <input type="button" name="next" class="form_siguiente" value="Siguiente">
                </fieldset>
                <fieldset id="fldset-3">
                    <div>
                        <input type="radio" id="sublime" name="editorfav" value="Sublime Text">
                        <label for="sublime">Sublme Text 3</label><br>
                        <input type="radio" id="vstudio" name="editorfav" value="Visual Studio">
                        <label for="vstudio">Visual Studio</label><br>  
                    </div>
                        <input type="button" name="previous" class="form_anterior" value="Anterior"/>
                        <input type="submit" name="submit" class="submit" value="Enviar Respuestas">    
                </fieldset>
            </form>
        </div>

3
  • Fabian, muchas gracias, en efecto es lo que estaba necesitando, ahora a implementarlo en el formulario real, el cual trabajé ayer y tiene 50 fieldsets. Commented el 15 jun. 2022 a las 13:06
  • Estimado Fabian, al agregar más DIV's en cada Fieldset el código ya no válida dichos inputs, no sería más adecuado obtener los inputs de cada fieldset, ya que los div's pueden cambiar en cantidad, estoy atento al código y también analizando tu solución, de antemano gracias Commented el 15 jun. 2022 a las 17:34
  • @Gabian Castro Lozano, de nueva cuenta agradezco los minutos para atender dicho cuestionamiento. Commented el 16 jun. 2022 a las 1:37
1

Basándome en la respuesta de @FabianCastroLozano y en la nueva petición del OP, este código parece solucionar la nueva problemática surgida del hecho de usar más de un grupo de botones de radio por fieldset y página:

$(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('div').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="editorfav"]').is(':checked')) {
      $('#alertaerror').fadeTo(1500, 500).slideUp(1000, function() {
        $('#alertaerror').slideUp(1000);
      });
      return false;
    } else {
      return true;
    }
  });
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <style>
    #frm_registro fieldset:not(:first-of-type) {
      display: none;
    }
    
    div {
      padding: 30px 0px 30px;
    }
  </style>
</head>

<body>
  <form id="frm_registro" action="valida.php" method="post">
    <fieldset id="fldset-1">
      <div>
        <input type="radio" id="html" name="languajefav" value="HTML">
        <label for="html">HTML</label><br>
        <input type="radio" id="javascript" name="languajefav" value="JavaScript">
        <label for="javascript">JavaScript</label>
      </div>
      <div>
        <input type="radio" id="ie" name="navegador" value="Internet Explorer">
        <label for="ie">Internet Explorer</label><br>
        <input type="radio" id="mf" name="navegador" value="Mozilla Firefox">
        <label for="javascript">Mozilla Firefox</label>
      </div>
      <input type="button" name="next" class="form_siguiente" value="Siguiente">
    </fieldset>
    <fieldset id="fldset-2">
      <div>
        <input type="radio" id="mysql" name="bdfavorita" value="MySQL">
        <label for="mysql">MySQL</label><br>
        <input type="radio" id="mssql" name="bdfavorita" value="SQL Server">
        <label for="mssql">SQL Server</label><br>
      </div>
      <input type="button" name="previous" class="form_anterior" value="Anterior" />
      <input type="button" name="next" class="form_siguiente" value="Siguiente">
    </fieldset>
    <fieldset id="fldset-3">
      <div>
        <input type="radio" id="sublime" name="editorfav" value="Sublime Text">
        <label for="sublime">Sublme Text 3</label><br>
        <input type="radio" id="vstudio" name="editorfav" value="Visual Studio">
        <label for="vstudio">Visual Studio</label><br>
      </div>
      <input type="button" name="previous" class="form_anterior" value="Anterior" />
      <input type="submit" name="submit" class="submit" value="Enviar Respuestas">
    </fieldset>
  </form>
</body>

</html>

El cambio ha sido el siguiente. Donde antes ponía esto:

if($(this).parent().children('div').children('input').is(':checked')){

ahora he puesto esto:

let todos = true
$(this).parent().children('div').each(function(i, el) {
  if(!$(el).children('input').is(':checked')) {
    todos = false
  }
})
if(todos){

Explicación

  • Inicializo la variable todos con valor verdadero true
  • Dada la estructura del HTML recorro los divs uno a uno, y como cada div contiene un grupo de botones de radio con el mismo name procedo a verificar si alguno está marcado.
  • En caso de que no encuentre ninguno en alguno de los divs, establezco la variable todos en false, de tal forma que pase lo que pase con el resto nunca más será true hasta que se pulse el botón de nuevo y vuelta a empezar.
  • Luego aplico el condicional sobre la variable todos para que, en caso de que sea true pase la página

Lo mio ha sido una simple modificación del código de la anterior respuesta y con el ánimo de terminar de ayudar al OP con su variación de la pregunta y código incial planteado, pero la aceptación de la respuesta a la pregunta original se la debe llevar @FabianCastroLozano.

Debo recordarle al OP que las preguntas no pueden variarse sobre la marcha cuando ya hay una respuesta válida porque terminan sin entenderse si alguien más viene a consultarlas. En todo caso se deberia solucionar por comentarios o bien una nueva pregunta con el nuevo escenario.

1
  • aprecio mucho la respuesta, y por no plantera de manera correcta la pregunta desde un inicio. Commented el 16 jun. 2022 a las 1:36

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.