8

Tengo desarrollado un pequeño script wizard nativamente, algo distinto y diferente a los wizard normales.

Un poco de como funciona

Mi wizard evita perder los datos introducidos en el formulario y conserva el paso en el que se encuentra el usuario así la página se recargue o el usuario de clic en otro enlace por error o al cerrar la pestaña los datos y los pasos se conservan, con esto evito que el usuario tenga que repetir nuevamente los pasos desde cero (excepto si el usuario cierra el navegador).

El problema está que si el usuario deja campos vacíos del formulario, el usuario puede continuar/avanzar al siguiente paso y esto no debe suceder. Necesito validar los campos del formulario en cada paso para evitar que continúe al siguiente paso si los campos del formulario no están correctamente completados.

La idea es crear validaciones como por ejemplo los siguientes wizard o este otro wizard si dan clic en continuar al siguiente paso dejando los campos input del formulario vacios este lanza un error por debajo o a los costados por cada uno de los campos input vacíos evitando así continuar al siguiente paso.

En los ejemplos se puede observar que su validación la va validando de acuerdo a su contenedor dentro del paso actual, antes de continuar al siguiente paso.

La estructura HTML de mi wizard se podría decir que es la misma cada paso tiene su contenedor con su identificación única step1, step2, step3 etc...

  <?php include 'php/wizard.php' ?>
  <!-- dato importante para el funcionamiento wizard -->
  <script type="text/javascript">
    var step = <?php echo $step ?>;
    var radio = <?php echo $radio ?>;
  </script>

<form id="form">
  <div id="step1" class="step">
   <h1>Paso 1</h1>
   <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
   <a href="#" onclick="show_step('2')">continuar</a>
  </div>
  <div id="step2" class="step">
   <h1>Paso 2</h1>
   <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
   <a href="#" onclick="show_step('1')">Atras</a>
   <a href="#" onclick="show_step('3')">continuar</a>
  </div>
  <div id="step3" class="step">
   <h1>Paso 3</h1>
   <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
   <a href="#" onclick="show_step('2')">Atras</a>
   <a href="#" onclick="show_step('4')">continuar</a>
  </div>
  <div id="step4" class="step">
   <h1>Paso 4</h1>
   <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
   <a href="#" onclick="show_step('3')">Atras</a>
   <input><-- Finalizar
  </div>
</form>

Mi Wizard

Nota: Las validaciones del formulario sé deben validar nativamente usando solo jQuery/PHP sin utilizar librerías u plugin.

function show_step(step){
  var data = $( "#form" ).serialize();
  var url = 'saveTemp.php?step=' + step;
  // recuperamos el lavel del radio button seleccionado
  //var valor_radio = $('input:radio[name=radio]:checked').next("label").text();
  $.ajax({
    type: "POST",
    url: url,
    data: data
  }).done(function(resp){

    step = parseInt(step);
    $('#address').val(resp.address);
    $('#email').val(resp.email);
    $('#name').val(resp.name);
    $('#phone').val(resp.phone);
    $('#radio').val(resp.radio);
    $('#username').val(resp.username);

    if (step === 2) {
       var radio = parseInt(resp.radio);
       switch(radio) {
          case 1:
            urlform = './app/themes/pay_paypal.php'
          break;
          case 2:
            urlform = './app/themes/pay_paypal2.php'
          break;
          case 3:
            urlform = './app/themes/pay_paypal3.php'
          break;
          default:
            urlform = './app/themes/pay_paypal4.php'
          break;

        }
      $('#divPago').load(urlform,function(responseTxt, statusTxt, xhr){
        if(statusTxt === "success") {
          $('.step').css( "display", "none" );
          $('#step'+ step).fadeIn("slow");
          animacion(step);
        }
        if(statusTxt === "error") {
          //
        }

      });
    } else {
      $('.step').css( "display", "none" );
      $('#step'+ step).fadeIn("slow");
      animacion(step);
    }

  });

};

$(function() {
  show_step(step);
});
7
  • Si estas almacenando información en esas variables?, porque por lo que veo el mensaje es claro y simplemente te dice que la variable no esta inicializada.
    – Andrés
    Commented el 9 ene. 2018 a las 19:40
  • El mensaje de error tiene razón Doe, porque esas variables no existen en el archivo pay_paypal.php. Según tú, ¿de dónde deberían venir esas variables? Si tú quieres manejarlas en pay_paypal.php o en otro archivo tendrás que pasárselas de algún modo.
    – A. Cedano
    Commented el 9 ene. 2018 a las 20:07
  • Doe si los datos están en cart.php y tú quieres agregar la plantilla desde allí entonces puedes pasar las variables perfectamente a través de Ajax y recuperar en el done la respuesta dada para actualizar el contenido de cart.php. Algo parecido a la pregunta en la que tienes abierta recompensa. Allí te recomendé usar load porque no sabía que tenías que pasar datos a los archivos php que llamas en el load.
    – A. Cedano
    Commented el 9 ene. 2018 a las 20:17
  • @J.Doe, no veo como validas los campos. ¿Lo haces con JS o PHP? ¿Usas alguna librería? Por favor, edita tu pregunta y agrega el código.
    – Marcos
    Commented el 17 ene. 2018 a las 12:27
  • @J.Doe, estoy de acuerdo en que las validaciones hay que hacerlas con JS, pero también son necesarias en PHP, de lo contrario nada evita que te lo "hackeen". Volviendo a las validaciones en JS, te diría que es necesario que definas si quieres usar una lib (cual) o no.
    – Marcos
    Commented el 17 ene. 2018 a las 19:29

4 respuestas 4

6
+200

En base a este problema:

El problema está que si el usuario deja campos vacíos del formulario, el usuario puede continuar/avanzar al siguiente paso y esto no debe suceder. Necesito validar los campos del formulario en cada paso para evitar que continúe al siguiente paso si los campos del formulario no están correctamente completados.

Una solución a tu problema es buscar y validar solo aquellos campos dentro del paso actual, antes de continuar al siguiente.

Si solo te interesa validar:

  • Que si los campos son radio o checkbox, al menos uno este seleccionado
  • Que si los campos son input (distinto de radio o checbox), select o textarea, no estén vacíos

Entonces podrías hacer algo simple como esto:

Ejemplo:

let currentStep = 1; // Variable que indica el paso actual

function show_step(step) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + step;
  var valid = true;

  // [OPCIONAL] Validamos solo si se esta yendo hacia adelante
  if (currentStep < step) {
  
    // Buscamos todos los campos dentro del paso actual.  
    $('#step' + currentStep).find('input,textarea,select').each((idx, el) => {
      let $field = $(el);
      let $fieldCont = $field.closest('.form-group');

      // Si el campo es un checkbox o un radio y no se selecciono una opcion
      if (($field.prop('type') == 'checkbox' || $field.prop('type') == 'radio') &&
          !$fieldCont.find('input[name="'+$field.prop('name')+'"]:checked').length) {
        $fieldCont.addClass('error');
        valid = false;
      }
      // Si el campo NO es un checkbox ni un radio y esta vacio
      else if ($field.prop('type') != 'checkbox' && $field.prop('type') != 'radio' &&
        !$field.val()) {
        $fieldCont.addClass('error');
        valid = false;
      } else {
        $fieldCont.removeClass('error');
      }
    });
  }

  // Si al menos un campo no fue completado
  if (!valid) {
    return;
  }

  // ------------------------------------------
  // AQUI tu código ajax
  // ------------------------------------------
  $('#step' + currentStep).css("display", "none");
  $('#step' + step).fadeIn("slow");
  currentStep = step;
  // ------------------------------------------
  // ------------------------------------------
};

$(function() {
  $('#step' + currentStep).fadeIn("slow");
  
  //
  $('a.next').click(e => {
    e.preventDefault();
    show_step(currentStep + 1);
  });
  
  $('a.back').click(e => {
    e.preventDefault();
    show_step(currentStep - 1);
  });
});
.step {
  display: none;
}
.errorMsg {
  display: none;
  color: red;
}
.error .errorMsg {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form">
  <div id="step1" class="step">
    <h1>Paso 1</h1>
    <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
    <div class="form-group">
      <label>
        <span>Nombre :</span>
        <input type="text" name="nombre" />
        <div class="errorMsg">Debe ingresar su nombre</div>
      </label>
    </div>
    <div class="form-group">
      <label>
        <span>Apellido :</span>
        <input type="text" name="apellido" />
        <div class="errorMsg">Debe ingresar su apellido</div>
      </label>
    </div>
    <div class="form-group">
      <label>
        <span>Email :</span>
        <input type="text" name="email" />
        <div class="errorMsg">Debe ingresar su cuenta de correo</div>
      </label>
    </div>
    <!-- &&& -->
    <a href="#next" class="next">Siguiente</a>
  </div>
  <div id="step2" class="step">
    <h1>Paso 2</h1>
    <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
    <div class="form-group">
      <div>Genero :</div>
      <label><input type="radio" name="genero" value="male" /> Masculino</label>
      <label><input type="radio" name="genero" value="female" /> Femenino</label>
      <label><input type="radio" name="genero" value="other" /> Otro</label>
      <div class="errorMsg">Debe indicar su genero</div>
    </div>
    <div class="form-group">
      <div>Tecnologias :</div>
      <label><input type="checkbox" name="tecs[]" value="js" /> Javascript</label>
      <label><input type="checkbox" name="tecs[]" value="css" /> CSS</label>
      <label><input type="checkbox" name="tecs[]" value="html" /> HTML</label>
      <div class="errorMsg">Debe seleccionar al menos una</div>
    </div>
    <!-- &&& -->
    <a href="#back" class="back">Atras</a> 
    <a href="#next" class="next">Siguiente</a>
  </div>
  <div id="step3" class="step">
    <h1>Paso 3</h1>
    <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
    <div class="form-group">
      <label>
        <span>¿Es desarrollador? :</span>
        <select name="programador">
          <option value=""> - </option>
          <option value="si">Si</option>
          <option value="no">No</option>
        </select>
        <div class="errorMsg">Debe indicar si programa</div>
      </label>
    </div>
    <div class="form-group">
      <label>
        <span>¿Por que? :</span>
        <textarea name="Comentarios"></textarea>
        <div class="errorMsg">Debe agregar un comentario</div>
      </label>
    </div>
    <!-- &&& -->
    <a href="#back" class="back">Atras</a> 
    <a href="#next" class="next">Siguiente</a>
  </div>
  <div id="step4" class="step">
    <h1>Paso 4</h1>
    <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
    <a href="#back" class="back">Atras</a> 
  </div>
</form>

13
  • @Marcos Excelente respuesta +1 Commented el 20 ene. 2018 a las 23:21
  • @Marcos Disculpa mi ignorancia, pero el codigo Javascript no puede ser manipulado y modificado desde el navegador pudiendo asi saltar la validación?
    – Lucas. D
    Commented el 21 ene. 2018 a las 1:10
  • @LucasDavid, efectivamente, el js puede ser modificado y hasta desactivado, es por eso que en el backend siempre deben validarse los datos que se ingresan. Las validaciones que se hacen en el frontend son solo para mejorar la experiencia del usuario (UX).
    – Marcos
    Commented el 21 ene. 2018 a las 1:16
  • @Marcos, muchas gracias.!
    – Lucas. D
    Commented el 21 ene. 2018 a las 1:25
  • @Marcos He adaptado su código a mi código correctamente a lo primero me deje llevar por esto let currentStep=1; pensé que iba hacer difícil adaptar esa nueva variable olvida lo dicho. Solo quedaría preguntarte lo de eliminar los atributos javascript en la etiqueta <a> y crear los enlaces de continuar y atrás de la siguiente forma: <a href="#back" class="back">Atras</a> <a href="#next" class="next">Siguiente</a> porque al dejarlo de la manera actual es fácil burlar el sistema de validación cambiando sus propiedades desde la consola del navegador, del paso 1 puedo saltar al paso 4
    – Otto
    Commented el 21 ene. 2018 a las 5:50
4

Depende mucho de la validación que quieras hacer, por ejemplo si quieres validar que ninguno de los inputs este vacio solo usando Jquery puedes hacer lo siguiente:

$("input").each(function () { //inicia un bucle con todos los inputs
    if ($(this).val() == '') { //Si el input esta "vacio"
        alert("Debe llenar todos los campos");
        return false; //detiene el bucle
    }
});

puedes personalizar el selector "$()" segun los inputs que desees comprobar, ejemplo:

$("input:checkbox") //solo los checkbox
$("input:radio") //solo los radios
$("select") // los select
//tambien puedes comprobar varios tipos a la vez
$("select, input:text, input:checkbox")

para el caso de los checkbox el "if()" debes hacerlo de la siguiente forma:

if (!$(this).is(':checked')) { //Si el checkbox no esta seleccionado
    alert("Debe llenar todos los campos");
    return false; //detiene el bucle
});

para detener la funcion por completo antes del bucle puedes colocar una variable para comprobar, quedaria algo asi:

function show_step(step){
    var data = $( "#form" ).serialize();
    var url = 'saveTemp.php?step=' + step;
    var emptyInput = false;

    $("input").each(function () { //inicia un bucle con todos los inputs
        if ($(this).val() == '') { //Si el input esta "vacio"
            emptyInput = true;
            return false; //detiene el bucle
        }
    });

    if (emptyInput) {
        alert("Todos los campos son obligatorios");
        return void; //Detiene la ejecucion de esta funcion
    }
    // recuperamos el lavel del radio button seleccionado
    //var valor_radio = $('input:radio[name=radio]:checked').next("label").text();
    $.ajax({
        type: "POST",
        url: url,
        data: data
        }).done(function(resp){

        step = parseInt(step);
        $('#address').val(resp.address);
        $('#email').val(resp.email);
        $('#name').val(resp.name);
        $('#phone').val(resp.phone);
        $('#radio').val(resp.radio);
        $('#username').val(resp.username);

        if (step === 2) {
           var radio = parseInt(resp.radio);
           switch(radio) {
              case 1:
                urlform = './app/themes/pay_paypal.php'
              break;
              case 2:
                urlform = './app/themes/pay_paypal2.php'
              break;
              case 3:
                urlform = './app/themes/pay_paypal3.php'
              break;
              default:
                urlform = './app/themes/pay_paypal4.php'
              break;

            }
          $('#divPago').load(urlform,function(responseTxt, statusTxt, xhr){
            if(statusTxt === "success") {
              $('.step').css( "display", "none" );
              $('#step'+ step).fadeIn("slow");
              animacion(step);
            }
            if(statusTxt === "error") {
              //
            }

          });
        } else {
            $('.step').css( "display", "none" );
            $('#step'+ step).fadeIn("slow");
            animacion(step);
        }
    });
};
0
4

Mi alternativa de solución es la siguiente. la validación se aplica por tipos , input textarea , select , (esto puede variar) solo se valida que no esté vacíos y que esté un elemento seleccionado de un select. Para la validación utilizo un array para ir añadiendo los errores y los elementos donde se producieron.

Aparte de la validación con JQuery , se podría ir mostrando los mensajes por ejemplo cuando el input no es válido , esto se podría lograr añadiendo el atributo pattern al input con la validación que se requiera por ejemplo pattern="[0-9]{6,11}" para que ingrese mínimo 6 y máximo 11. , El código está comentado

$(function() {
    //Ocultar step2 , y step3
    $('#step2,#step3').hide('slow');

    // Enlaces es la clase que determina si se pasa al siguiente o no
    $(document).on('click','.enlaces',function(e){
        let referencia=  $(this).data('actual');
        if(validarCampos(referencia)){ // si pasa la validación
            // si llega al final de los steps , envia el form
            if($(this).data('next')==='end'){
                alert("Enviar Formulario")
            }
            // caso contrario oculta el step actual
            $(this).parents('.step').hide('slow');
            // y muestra el siguiente
            $('#' + $(this).data('next')).show();
        }
    });

    $(document).on('click','.anterior',function(){
        let btn = $(this).siblings();
        $('#' + $(this).data('prev')).show();
        $('#' + $(btn).data('actual')).hide('slow');
    });


    function validarCampos(step) {
        let errors = [];
        // Buscamos los input , textarea y select del step actual
        $('#'+step).find('input,textarea,select').each(function(index, el) {
            let entrada = $(el)
            // si es input o textarea aplicamos una validación
            if (entrada.is("input") || entrada.is("textarea")) {
                // Validamos que no esté vacío , si está se añade al rray
                
                if(entrada.val().trim().length === 0 ){
                    errors.push({'elemento' : entrada , 'error' : 'No dejar el campo ' +  entrada.attr('name') + ' Vacío'});
                }
                
                else{
                    // si no cumplio la validación de pattern
                    if(!el.checkValidity()){
                        errors.push({'elemento' : entrada , 'error' : 'El campo no cumple los requisitos de validación'});
                    }
                    // caso contrario removes el mensaje de error
                    else{
                        entrada.siblings('.message').text('');
                        entrada.parent('.form-group').removeClass('has-error'); 
                    }
                   
                }
            }
            //caso contrario si es select , otra validación 
            else if (entrada.is("select")) {
                // Validamos que esté seleccionada una opción del select
                if(entrada.val() == 0 ){
                    errors.push({'elemento' : entrada , 'error' : 'Seleccione una opción válida para el campo '+ entrada.attr('name') });
                }
                else{
                   entrada.siblings('.message').text('');
                   entrada.parent('.form-group').removeClass('has-error'); 
                }
            } 
        });

        //si hubieron errores , iteramos sobre el array de estos
        // y los mostramos
        if(errors.length>0){
            $.each(errors, function(index, val) {
                $('#'+step).find(val.elemento).siblings('.message').text(val.error);
                $('#'+step).find(val.elemento).parent('.form-group').addClass('has-error');
            });
            return false;
        }
        return true;
    }
});
input:invalid {
  border: 1px solid #a94442;
}
  

input:invalid + .message::after{
  color: #a94442;
  content:'     Campo es inválido';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <hr>
        <form  accept-charset="utf-8">
            <div class="col-md-6 step" id="step1">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        Primer Paso
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="nombre">Nombre</label>  
                            <input type="text" name="nombre" required placeholder="Ingrese nombre" class="form-control"  pattern="[A-Za-z0-9 ]{1,10}">
                            <span class="message help-block"></span>
                        </div>

                        <div class="form-group">
                            <label for="genero">Género</label>
                            <select name="genero" class="form-control" required>
                                <option value="0">Seleccione </option>
                                <option value="1">Hombre</option>
                                <option value="2">Mujer</option>
                            </select>
                            <span class="message help-block"></span>
                        </div>
                        <div class="form-group">
                            <a href="#" data-next="step2" data-prev="step1" data-actual="step1" class="btn btn-info enlaces">Siguiente</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 step" id="step2">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Segundo Paso
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="telefono">Teléfono</label>
                            <input type="text" name="telefono"  required placeholder="Ingrese telefono" class="form-control" pattern="[0-9]{6,11}">
                            <span class="message help-block"></span>
                        </div>

                        <div class="form-group">
                            <label for="direccion">Dirección</label>
                           <textarea name="direccion" class="form-control"></textarea>
                            <span class="message help-block"></span>
                        </div>
                        <div class="form-group">
                            <a href="#" class="btn btn-default anterior"  data-prev="step1">Anterior</a>
                            <a href="#" data-next="step3"  data-actual="step2" class="btn btn-primary enlaces">Siguiente</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 step" id="step3">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        Tercer Paso
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="nombre">Nombre</label>
                            <input type="text" name="nombre" required placeholder="Ingrese nombre" class="form-control">
                            <span class="message help-block"></span>
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" name="email"  required placeholder="Ingrese email" class="form-control">
                            <span class="message help-block"></span>
                        </div>
                        <div class="form-group">
                            <a href="#" class="btn btn-default anterior" data-prev="step2">Anterior</a>
                            <a href="#" data-next="end" data-actual="step3" class="btn btn-success enlaces">Finalizar</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

3
  • +1 Excelente respuesta como las demás, pero donde se debe añadir mi código AJAX, en la respuesta de Marcos me indico donde añadir mi código AJAX, una duda, porque siempre está activado al ejecutar su código el primer campo diciendo Campo es inválido sin haber dado clic en siguiente?
    – Otto
    Commented el 22 ene. 2018 a las 5:14
  • @J.Doe después de cumplir las condiciones y haber validado todo el wizard, puede ejecutar su ajax , en mi ejemplo coloqué un alert(), está activado porque el campo es requerido (required) es un selector input:invalid para simular la validación en "tiempo real" esto se valida con required o pattern (expresiones regulares) por ejemplo si en nombre ingresa más de 10 caracteres mostrará el mensaje si no lo ocultará.
    – Dev. Joel
    Commented el 22 ene. 2018 a las 5:23
  • Esta era mi preferida, por tomar todas las validaciones del HTML, sin tener validaciones hardcoddeadas.
    – Mariano
    Commented el 22 ene. 2018 a las 16:46
2

Este es un ejemplo de como hacer un formulario por pasos y que nos valide los campos paso a paso, en el se han incluido validaciones para los siguiente tipos de campos:

  • text con mínimo y máximo de caracteres de forma opcional, de pueden establecer el rango con data-min y data-max.
  • tel para validar teléfonos, en base a un regex (/^(?:(?:\+|00)?34)?[6-9]\d{8}$/).
  • textarea con mínimo y máximo de caracteres de forma opcional, de pueden establecer el rango con data-min y data-max.
  • select y select multiple, requiriendo que se seleccione minimo una opción.
  • radio requeriendo que se selecciono minimo una opción.
  • checkbox requeriendo que este sea seleccionado.

Los campos que requieran validación deben tener el atributo required.

Se pueden customizar los mensajes de error de cada campo incluyendo un span con la clase wizard-message dentro del label.

Se prevene el envío por defecto con la tecla ENTER si no estamos en el ultimo paso.

Se utilizan las clases .next y .back para avanzar o retroceder.

Se debe establecer el último paso, pare ello podemos utilizar el atributo data-end en la etiqueta form o establecer la propiedad directamente con endStep

Para definir un paso del formlulario utilizamos una etiqueta div con la clase wizard y un id wizard-N donde N representa el número de paso.

Se ha utilizado la librería Bootstrap para dar un poco de estilo. El resto es js y JQuery.

He comentado el código para hacer fácil su comprensión.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Formulario por pasos con validación</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
crossorigin="anonymous">

<style type="text/css">
    .invalid-wizard-input {
        border-color: #dc3545;
    }
    .invalid-wizard {
        color: #dc3545;
    }
    .valid-wizard-input {
        border-color: #28a745;
    }
    .valid-wizard {
        color: #28a745;
    }
    .wizard-message {
        display: none;
        color: #ff3545;
    }
</style>

</head>
<body>
<div class="container">
    <h3>Formulario por pasos con validación</h3>
    <form action="#" data-end="5" novalidate>
        <div class="form-group wizard" id="wizard-0">
            <h3>Pasos</h3>
            <ol>
                <li>Tipo text y teléfono</li>
                <li>Tipo text y textarea</li>
                <li>Tipo select y select multiple</li>
                <li>Tipo radio</li>
                <li>Tipo checkbox</li>
            </ol>
            <a href="#next" class="btn btn-success next">Siguiente</a>
        </div>
        <div class="form-group wizard" id="wizard-1">
            <label for="nombre">Nombre <span class="wizard-message">es requerido, y debe tener entre 3 y 8 caracteres</span></label>
            <input type="text" name="nombre" data-min="3" data-max="8" class="form-control" required>

            <label for="apellido">Apellido (Opcional)</label>
            <input type="text" name="apellido" class="form-control">

            <label for="telefono">Télefono <span class="wizard-message">no es válido.</span></label>
            <input type="tel" name="telefono" class="form-control" required>

            <a href="#next" class="btn btn-success next">Siguiente</a>
        </div>
        <div class="form-group wizard" id="wizard-2">
            <label for="direccion">Dirección <span class="wizard-message">es requerido, y debe tener un maximo 10 caracteres</span></label>
            <input type="text" name="direccion" data-max="10" class="form-control" required>

            <label for="mensaje">Mensaje <span class="wizard-message">es requerido, y debe tener minimo 10 caracteres</span></label>
            <textarea name="mensaje" data-min="10" cols="60" rows="6" class="form-control" required/> </textarea>

            <a href="#back" class="btn btn-warning back">Atras</a>
            <a href="#next" class="btn btn-success next">Siguiente</a>
        </div>
        <div class="form-group wizard" id="wizard-3">
            <label for="dia">Día <span class="wizard-message">es requerido, selecciono uno.</span></label>
            <select name="dia" class="form-control" required>
                <option>Selecione un día</option>
                <option value="l">Lunes</option>
                <option value="m">Martes</option>
                <option value="x">Miércoles</option>
                <option value="j">Jueves</option>
                <option value="v">Viernes</option>
            </select>

            <label for="asignatura">Asignatura <span class="wizard-message">es requerido, por lo menos debe seleccionar uno.</span></label>
            <select name="asignatura" multiple class="form-control" required>
                <optgroup label="Obligatorias">
                <option value="mat">Matem&aacute;ticas</option>
                <option value="len">Lenguaje</option>
                </optgroup>
                <optgroup label="Optativas">
                <option value="cor">Corte y confecci&oacute;n</option>
                <option value="ast">Astronom&iacute;a</option>
                </optgroup>
            </select> 

            <a href="#back" class="btn btn-warning back">Atras</a>
            <a href="#next" class="btn btn-success next">Siguiente</a>
        </div>
        <div class="form-group wizard" id="wizard-4">
            <label for="optradio">Opciones radio <span class="wizard-message">es requerido, seleccione uno.</span></label>
            <div class="radio">
              <label><input type="radio" name="optradio" value="opt1" required>Option 1</label>
            </div>
            <div class="radio">
              <label><input type="radio" name="optradio" value="opt2" required>Option 2</label>
            </div>
            <div class="radio disabled">
              <label><input type="radio" name="optradio" value="opt3" disabled>Option 3</label>
            </div>

            <a href="#back" class="btn btn-warning back">Atras</a>
            <a href="#next" class="btn btn-success next">Siguiente</a>
        </div>
        <div class="form-group wizard" id="wizard-5">
            <div class="checkbox">
              <label for="myCheckbox">
                <input type="checkbox" name="myCheckbox" value="valor" required>Checkbox
                <span class="wizard-message">es requerido, marque la casilla.</span>
              </label>
            </div>

            <a href="#back" class="btn btn-warning back">Atras</a>
            <a href="#next" class="btn btn-success next">Enviar</a>
        </div>
    </form>
</div>

<!-- Compiled and minified jquery -->
<script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
        crossorigin="anonymous"></script>

<script type="text/javascript">
    //creamos un objeto general que contendra todo lo relacionado 
    function wizard(){
        // Propiedades
        // paso de inicio
        this.step = 0;
        // paso final
        this.endStep = 0;

        // establemos el paso y lo mostramos
        this.init = function(step) {
            this.step = step;
            this.show();
            
            if ($('form').data('end') != undefined) {
                this.endStep = $('form').data('end');
            }
        }
        
        // Esta funcion se encarga de optener los diferentes input required
        // y llamar a las diferentes funciones de validacion en funcion del type
        this.validate = function()
        {
            // optenemos todos los input requires del paso actual
            let input = $('#wizard-'+this.step+' :input[required]');
            // declaramos una bandera
            var flag = true;
            // recorremos los input required
            for (var i = input.length - 1; i >= 0; i--) {
                let valid;
                // aqui determinamos a que funcion de validacion se ha de llamar en segun el type 
                // las funciones de validacion deben retornar true o false
                switch(input[i].type) {
                    case "text":
                        valid = this.validateText(input[i]);
                        break;
                    case "tel":
                        valid = this.validateTel(input[i]);
                        break;
                    case "textarea":
                        valid = this.validateText(input[i]);
                        break;
                    case "select-one":
                        valid = this.validateSelectOne(input[i]);
                        break;
                    case "select-multiple":
                        valid = this.validateSelectMultiple(input[i]);
                        break;
                    case "radio":
                        valid = this.validateRadio(input[i]);
                        break;
                    case "checkbox":
                        valid = input[i].checked;
                        break;
                    default:
                        valid = true;
                        console.log('Campo input no reconocido');
                        break;
                }

                // comprobamos si paso la validacion
                if (!valid) {
                    // si no paso la validación 
                    // cambiamos la bandera a false
                    flag = false;
                    // y añadimos los estilos de error
                    $( "[name='"+input[i].name+"']" ).removeClass('valid-wizard-input');
                    $( "label[for='"+input[i].name+"']" ).removeClass('valid-wizard');
                    $( "[name='"+input[i].name+"']" ).addClass('invalid-wizard-input');
                    $( "label[for='"+input[i].name+"']" ).addClass('invalid-wizard');
                    $( "label[for='"+input[i].name+"'] > span" ).show();
                } else {
                    // si paso la validacion
                    // añadimos los estilos de ok
                    $( "[name='"+input[i].name+"']" ).removeClass('invalid-wizard-input');
                    $( "label[for='"+input[i].name+"']" ).removeClass('invalid-wizard');
                    $( "[name='"+input[i].name+"']" ).addClass('valid-wizard-input');
                    $( "label[for='"+input[i].name+"']" ).addClass('valid-wizard');
                    $( "label[for='"+input[i].name+"'] > span" ).hide();
                }
            }

            // comprobamos la bandera
            // si es true, avanzamos un paso
            if (flag) {
                if (this.endStep > this.step) {
                    this.step++;
                    this.show();
                } else {
                    // si es el ultimo paso enviamos
                    $('form').submit();
                }
            }

            return flag;
        }

        // esta funcion esconde todos los pasos y muestra el paso actual
        this.show = function()
        {
            $('.wizard').hide();
            $('#wizard-'+this.step).fadeIn("slow");
        }

        // funcion para validar type=text
        this.validateText = function(input)
        {
            let min, max;

            if (input.dataset['min'] != undefined) {
                min = input.dataset['min'];
            } else {
                min = 1;
            }

            if (input.dataset['max'] != undefined) {
                max = input.dataset['max'];
            } else {
                max = 255;
            }

            if(input.value.length >= min && input.value.length <= max) {
                return true;
            }
            return false;
        }

        // funcion para validar type=tel
        this.validateTel = function(input)
        {
            let patterTel = /^(?:(?:\+|00)?34)?[6-9]\d{8}$/;

            if( patterTel.test(input.value) ) {
                return true;
            }
            return false;
        }

        // funcion para validar type=select
        this.validateSelectOne = function(input)
        {
            if( input.options.selectedIndex != 0 ) {
                return true;
            }
            return false;
        }

        // funcion para validar type=select-multiple
        this.validateSelectMultiple = function(input)
        {
            if( input.selectedOptions.length > 0 ) {
                return true;
            }
            return false;
        }

        // funcion para validar type=radio
        this.validateRadio = function(input)
        {
            let checked = $('input:radio[name='+input.name+']:checked').val()
            if (checked) {
                return true;
            }
            return false;
        }
    }


    /* UTILIZACION */

    // inicializamos wizard
    w = new wizard;
    // establecemos el paso de inicio
    w.init(0);
    // establecemos el ultimo paso
    w.endStep = 5;
    // escuchamos el evento click sobre class .next
    $( ".next" ).on( "click", function() {
        // llamamos a validate para hacer las comprobaciones de los input
        w.validate()
    });

    // escuchamos el evento click sobre class .back
    $( ".back" ).on( "click", function() {
        // restamos un paso
        w.step--;
        // mostramos el paso actual
        w.show()
    });

    // Prevenir envio con enter
    $('input').keypress(function (e) {
      if (e.which == 13) {
        // prevenimos el envio
        e.preventDefault();
        e.stopPropagation();
        // llamamos a validate para validar y avanzar
        w.validate()
      }
    });

</script>
</body>
</html>

Como ya indique en los comentarios es facil adaptar el script a tu código dejo aqui un ejemplo con tu código.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS wizard validate</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">

    <style type="text/css">
        .invalid-wizard-input {
            border-color: #dc3545;
        }
        .invalid-wizard-for {
            color: #dc3545;
        }
        .valid-wizard-input {
            border-color: #28a745;
        }
        .valid-wizard-for {
            color: #28a745;
        }
        .wizard-message {
            display: none;
            color: #ff3545;
        }
    </style>

</head>
<body>
    <div class="container">
        <h3>Formulario</h3>
        <form id="form">
          <div id="step1" class="step">
           <h1>Paso 1</h1>
          <label for="nombre">Nombre <span class="wizard-message">es requerido, y debe tener entre 3 y 8 caracteres</span></label>
          <input type="text" name="nombre" data-min="3" data-max="8" class="form-control" required>
           <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
           <a href="#" class="next">continuar</a>
          </div>
          <div id="step2" class="step">
           <h1>Paso 2</h1>
           <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
           Input cargado por ajax, para no tener problemas la peticion deberia ser sincrona
           <div id="divPago"></div>
           <a href="#" class="back">Atras</a>
           <a href="#" class="next">continuar</a>
          </div>
          <div id="step3" class="step">
           <h1>Paso 3</h1>
           <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
           <a href="#" class="back">Atras</a>
           <a href="#" class="next">continuar</a>
          </div>
          <div id="step4" class="step">
           <h1>Paso 4</h1>
           <!-- Diferentes tipos de campo input u otros que se necesitan validar-->
           <a href="#" class="back">Atras</a>
           <input type="submit" value="finalizar">
          </div>
        </form>
    </div>

    <!-- Compiled and minified jquery -->
    <script
            src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script 
            src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
            crossorigin="anonymous"></script>   

    <!-- Codigo OP -->
    <script type="text/javascript">
    /*
    function show_step(step){
      var data = $( "#form" ).serialize();
      var url = 'saveTemp.php?step=' + step;
      // recuperamos el lavel del radio button seleccionado
      //var valor_radio = $('input:radio[name=radio]:checked').next("label").text();
      $.ajax({
        type: "POST",
        url: url,
        data: data
      }).done(function(resp){

        step = parseInt(step);
        console.log(step);
        console.log(resp);
        $('#address').val(resp.address);
        $('#email').val(resp.email);
        $('#name').val(resp.name);
        $('#phone').val(resp.phone);
        $('#radio').val(resp.radio);
        $('#username').val(resp.username);

        if (step === 2) {
           var radio = parseInt(resp.radio);
           switch(radio) {
             case 1:
               urlform = './app/themes/pay_paypal.php'
               break;
            case 2:
              urlform = './app/themes/pay_paypal2.php'
              break;
            case 3:
              urlform = './app/themes/pay_paypal3.php'
              break;
            default:
              urlform = './app/themes/pay_paypal4.php'
            break;                }
          
          $('#divPago').load(urlform,function(responseTxt, statusTxt, xhr){
          console.log(statusTxt);
            if(statusTxt === "success") {
              $('.step').css( "display", "none" );
              $('#step'+ step).fadeIn("slow");
              //animacion(step);
            }
            if(statusTxt === "error") {
              alert('error load');
            }

          });
        } else {
          $('.step').css( "display", "none" );
          $('#step'+ step).fadeIn("slow");
          animacion(step);
        }

      });

    };

    $(function() {
      show_step(1);
    });
    */
    </script>


    <!-- CODIGO -->
    <script type="text/javascript">
        //creamos un objeto general que contendra todo lo relacionado 
        function wizard(){
            // Propiedades
            this.step = 0;

            // establemos el paso y lo mostramos
            this.step = function(step) {
                this.step = step;
                this.show();
            }
            
            // Esta funcion se encarga de optener los diferentes input required
            // y llamar a las diferentes funciones de validacion en funcion del type
            this.validate = function()
            {
                // optenemos todos los input requires del paso actual
                let input = $('#step'+this.step+' :input[required]');
                // declaramos una bandera
                var flag = true;
                // recorremos los input required
                for (var i = input.length - 1; i >= 0; i--) {
                    let valid;
                    // aqui determinamos a que funcion de validacion se ha de llamar en segun el type 
                    // las funciones de validacion deben retornar true o false
                    switch(input[i].type) {
                        case "text":
                            valid = this.validateText(input[i]);
                            //console.log(input[i].dataset['min']);
                            break;
                        case "tel":
                            valid = this.validateTel(input[i]);
                            break;
                        default:
                    }

                    // comprobamos si paso la validacion
                    if (!valid) {
                        // si no paso la validación 
                        // cambiamos la bandera a false
                        flag = false;
                        // y añadimos los estilos de error
                        $( "input[name='"+input[i].name+"']" ).removeClass('valid-wizard-input');
                        $( "label[for='"+input[i].name+"']" ).removeClass('valid-wizard-for');
                        $( "input[name='"+input[i].name+"']" ).addClass('invalid-wizard-input');
                        $( "label[for='"+input[i].name+"']" ).addClass('invalid-wizard-for');
                        $( "label[for='"+input[i].name+"'] > span" ).show();
                    } else {
                        // si paso la validacion
                        // añadimos los estilos de ok
                        $( "input[name='"+input[i].name+"']" ).removeClass('invalid-wizard-input');
                        $( "label[for='"+input[i].name+"']" ).removeClass('invalid-wizard-for');
                        $( "input[name='"+input[i].name+"']" ).addClass('valid-wizard-input');
                        $( "label[for='"+input[i].name+"']" ).addClass('valid-wizard-for');
                        $( "label[for='"+input[i].name+"'] > span" ).hide();
                    }

                }

                // comprobamos la bandera
                // si es true, avanzamos un paso
                if (flag) {
                    //this.saveTemp(this.step);
                    this.step++;
                    this.saveTemp(this.step);
                    this.show();
                }
            }

            // esta funcion esconde todos los pasos y muestra el paso actual
            this.show = function()
            {
                $('.step').hide();
                $('#step'+this.step).show();
            }

            // funcion para enviar a salvar los datos 
            this.saveTemp = function(step) {
              let url = 'saveTemp.php?step=' + step;
              let data = $( "#form" ).serialize();

              $.ajax({
                type: "POST",
                url: url,
                data: data
              }).done(function(resp){
                  $('#address').val(resp.address);
                  $('#email').val(resp.email);
                  $('#name').val(resp.name);
                  $('#phone').val(resp.phone);
                  $('#radio').val(resp.radio);
                  $('#username').val(resp.username);

                  if (step === 2) {
                     var radio = parseInt(resp.radio);
                    console.log('step2');
                     switch(radio) {
                        case 1:
                          urlform = 'saveTemp.php'
                        break;
                        case 2:
                          urlform = 'saveTemp.php'
                        break;
                        case 3:
                          urlform = 'saveTemp.php'
                        break;
                        default:
                          urlform = 'saveTemp.php'
                        break;
                      }
                    $('#divPago').load(urlform, function(responseTxt, statusTxt, xhr){
                      if(statusTxt === "success") {
                          console.log('success');
                      }
                      if(statusTxt === "error") {
                          $('#divPago').html('<span class="invalid-wizard-for">ERROR AL CARGAR DATOS POR AJAX</span>')
                          console.log('error');
                      }

                    });
                  }
              });


            }

            // funcion para validar type=text
            this.validateText = function(input)
            {
                let min, max;

                if (input.dataset['min'] != undefined) {
                    min = input.dataset['min'];
                } else {
                    min = 1;
                }

                if (input.dataset['max'] != undefined) {
                    max = input.dataset['max'];
                } else {
                    max = 255;
                }

                if(input.value.length >= min && input.value.length <= max) {
                    return true;
                }
                return false;                
            }

            // funcion para validar type=tel
            this.validateTel = function(input)
            {
                let min, max;
                let patterTel = /^([0-9]+){9}$/;

                if( patterTel.test(input.value) ) {
                    return true;
                }
                return false;                
            }
            
        }

        // inicializamos wizard
        w = new wizard;
        // establecemos el paso de inicio
        w.step(1);

        // escuchamos el evento click sobre class .next
        $( ".next" ).on( "click", function() {
            // llamamos a validate para hacer las comprobaciones de los input
            w.validate()
        });

        // escuchamos el evento click sobre class .back
        $( ".back" ).on( "click", function() {
            // restamos un paso
            w.step--;
            // mostramos el paso actual
            w.show()
        });
    </script>
</body>
</html>

4
  • @Xerif Excelente amigo + 1 un gran trabajo... Commented el 20 ene. 2018 a las 23:22
  • El regex /^([0-9]+){9}$/ es incorrecto y puede llevar a un backtracking catastrófico! Si tu intención era que acepte exclusivamente 9 dígitos, debería ser /^\d{9}$/.
    – Mariano
    Commented el 21 ene. 2018 a las 17:42
  • 1
    @Xerif También tiene errores jaja (acepta 34|87654321). Debería ser /^(?:(?:\+|00)?34)?[6-9]\d{8}$/.
    – Mariano
    Commented el 21 ene. 2018 a las 17:59
  • @Mariano jajaja, ok, gracias por el aporte, lo dejo con esta última que me pasas, muchisimas gracias.
    – Xerif
    Commented el 21 ene. 2018 a las 18:01

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.