What is a promise in Javascript?

Question

Otto

Asked: 2020-01-10 11:35:15 +0800 CST 2020-01-10 11:35:15 +0800 CST 2020-01-10 11:35:15 +0800 CST

在继续下一步之前，如何在当前步骤中验证表单？

772

我本机开发了一个小型向导脚本，与普通向导不同。

一点它是如何工作的

我的向导避免丢失表单中输入的数据并保留用户所在的步骤，即使重新加载页面或用户错误单击另一个链接或关闭选项卡时，数据和步骤也会保留，与这可以防止用户不得不从头开始重复这些步骤（除非用户关闭浏览器）。

问题是如果用户留下空的表单字段，用户可以继续/前进到下一步，这不应该发生。如果未正确填写表单字段，我需要在每个步骤中验证表单字段以防止它继续执行下一步。

这个想法是创建验证，例如以下向导或其他向导，如果单击继续下一步，将input表单字段留空，这会在每个空字段的下方或侧面引发错误input，从而避免继续下一步。

在示例中，您可以看到其验证正在根据当前步骤中的容器进行验证，然后再继续下一步。

我的向导的 HTML 结构可以说是一样的，每一步都有它的容器，它的 ID 是唯一的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>

我的向导

注意：表单验证必须仅使用 jQuery/PHP 本地验证，而不使用库或插件。

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);
});

4 Answers

Voted

Marcos · Answer 1 · 2020-01-21T09:17:15+08:00

基于这个问题：

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>

Jose Gonzalez · Answer 2 · 2020-01-18T19:47:08+08:00

这在很大程度上取决于您要执行的验证，例如，如果您想验证所有输入都不是空的，只需使用 Jquery，您可以执行以下操作：

$("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
    }
});

您可以根据要检查的输入自定义选择器“$()”，例如：

$("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")

在复选框的情况下，“if()”必须按以下方式完成：

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

要在循环之前完全停止函数，您可以放置一个要检查的变量，它看起来像这样：

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);
        }
    });
};

Dev. Joel · Answer 3 · 2020-01-22T01:23:14+08:00

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>

Xerif · Answer 4 · 2020-01-19T11:05:58+08:00

这是一个如何逐步制作表单并逐步验证字段的示例，其中包含对以下类型字段的验证：

text可选择最小和最大字符，范围可以用data-min和设置data-max。
tel根据正则表达式 ( /^(?:(?:\+|00)?34)?[6-9]\d{8}$/) 验证电话。
textarea可选择最小和最大字符，范围可以用data-min和设置data-max。
select并且select multiple，要求至少选择一个选项。
radio要求至少选择一个选项。
checkbox要求选择此项。

需要验证的字段必须具有属性required。

您可以自定义每个字段的错误消息，方法span是wizard-message在label.

ENTER如果我们不在最后一步，默认情况下会使用密钥阻止发送。

类.next和用于.back向前或向后移动。

最后一步必须设置，为此我们可以使用data-end标签上的属性form或直接设置属性endStep

要定义表单步骤，我们使用带有类wizard和 id的 div 标签，wizard-N其中N表示步骤编号。

书柜被用来Bootstrap赋予一点风格。剩下的就是 js 和 JQuery。

我已经对代码进行了注释以使其易于理解。

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

正如我在评论中指出的那样，脚本很容易适应您的代码。我在这里留下一个带有您代码的示例。

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

在继续下一步之前，如何在当前步骤中验证表单？

Ejemplo:

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?