What is a promise in Javascript?

Question

Javier fr

Asked: 2022-01-15 08:48:05 +0800 CST 2022-01-15 08:48:05 +0800 CST 2022-01-15 08:48:05 +0800 CST

Validate the form of each wizard tab by clicking the next button

772

I have a question with a modal that I have, inside the modal there is a wizard with different forms. My question is how I could validate each of the forms, when clicking next the form would be validated and if everything is correct it would go to the next tab of the wizard. For validations I am using jquery validate.

I am attaching my code for you to brainstorm how to do it.

New Code

let reglas = {

    '1': { rules: {
          "form-usu-docente-matricula-add": {
            required: true,
            number: true
          },
          "form-usu-docente-nombre-add": {
            required: true
          },
          "form-usu-docente-ap-add": {
            required: true
          },
          "form-usu-docente-am-add": {
            required: true
          },
          "form-usu-docente-curp-add": {
            required: true
          },
          "form-usu-docente-ss-add": {
            required: true
          },
          "form-usu-docente-rfc-add": {
            required: true
          },
          "form-usu-docente-nacion-add": {
            required: true
          },
          "form-usu-docente-ife-add": {
            required: true
          },
          "form-usu-docente-ln-add": {
            required: true
          },
          "form-usu-docente-fn-add": {
            required: true
          },
          "form-usu-docente-sexo-add": {
            required: true
          },
          "form-usu-docente-nt-add": {
            required: true,
            number: true
          },
          "form-usu-docente-mailp-add": {
            required: true,
            email: true
          }

        },
        messages: {
          "form-usu-docente-matricula-add": {
            required: "* Ingresar Matrícula"
          },
          "form-usu-docente-nombre-add": {
            required: "* Ingresar Nombre(s)"
          },
          "form-usu-docente-ap-add": {
            required: "* Ingresar Apellido Paterno"
          },
          "form-usu-docente-am-add": {
            required: "* Ingresar Apellido Materno"
          },
          "form-usu-docente-curp-add": {
            required: "* Ingresar CURP"
          },
          "form-usu-docente-ss-add": {
            required: "* Ingresar Seguro Social"
          },
          "form-usu-docente-rfc-add": {
            required: "* Ingresar RFC"
          },
          "form-usu-docente-nacion-add": {
            required: "* Ingresar Nacionalidad"
          },
          "form-usu-docente-ife-add": {
            required: "* Ingresar IFE"
          },
          "form-usu-docente-ln-add": {
            required: "* Ingresar Lugar de Nacimiento."
          },
          "form-usu-docente-fn-add": {
            required: "* Ingresar Fecha de Nacimiento"
          },
          "form-usu-docente-sexo-add": {
            required: "* Ingresar Sexo"
          },
          "form-usu-docente-nt-add": {
            required: "* Ingresar Número de Tarjeta"
          },
          "form-usu-docente-mailp-add": {
            required: "* Ingresar Correo Personal"
          }

        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }},
    '2': { rules: {
          "form-usu-docente-estado-add": {
            required: true
          },
          "form-usu-docente-municipio-add": {
            required: true
          },
          "form-usu-docente-colonia-add": {
            required: true
          },
          "form-usu-docente-calle-add": {
            required: true
          },
          "form-usu-docente-ne-add": {
            required: true
          },
          "form-usu-docente-ni-add": {
            required: true
          },
          "form-usu-docente-telefono-add": {
            required: true,
            number: true
          },
          "form-usu-docente-celular-add": {
            required: true,
            number: true
          },
          "form-usu-docente-cp-add": {
            required: true,
            number: true
          }
        },
        messages: {
          "form-usu-docente-estado-add": {
            required: "* Ingresar Estado"
          },
          "form-usu-docente-municipio-add": {
            required: "* Ingresar Municipio"
          },
          "form-usu-docente-colonia-add": {
            required: "* Ingresar Colonia"
          },
          "form-usu-docente-calle-add": {
            required: "* Ingresar Calle"
          },
          "form-usu-docente-ne-add": {
            required: "* Ingresar Número Exterior"
          },
          "form-usu-docente-ni-add": {
            required: "* Ingresar Número Interior"
          },
          "form-usu-docente-telefono-add": {
            required: "* Ingresar Teléfono"
          },
          "form-usu-docente-celular-add": {
            required: "* Ingresar Celular"
          },
          "form-usu-docente-cp-add": {
            required: "* Ingresar Código Postal"
          }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }}
  };

  function formValidate(num) {
    if(reglas[num]) {
        $('#modal-form-add-docente').validate(reglas[num]);
        console.log($('#modal-form-add-docente').validate().settings.rules);
        let valid = $('#modal-form-add-docente').valid();
        $('#modal-form-add-docente').validate().destroy();
        return valid;
    }
    return true;
}


  function wizard_docente(wizard){

    switch (wizard) {
      case "s_menu1":
        wizard_posicion_docente(wizard);
        break;
      case "s_menu2":
        wizard_posicion_docente(wizard);
        break;
      case "r_menu2":
        wizard_posicion_docente(wizard);
        break;
      case "s_menu3":
        wizard_posicion_docente(wizard);
        break;
      case "r_menu3":
        wizard_posicion_docente(wizard);
        break;
      case "s_menu4":
        wizard_posicion_docente(wizard);
        break;
      case "r_menu4":
        wizard_posicion_docente(wizard);
        break;
      case "r_menu5":
        wizard_posicion_docente(wizard);
        break;
      default:
        alert("default");
        break;
    }
  }

  function wizard_posicion_docente(posicion){
    // Separar en partes para saber qué hacer
        // prevNext puede ser "s" (siguiente) o "r" (regresar)
        // current es el número de menú actual
        let [prevNext, current] = posicion.split('_menu');
        // Cuál es la siguiente pestaña a mostrar
        let next;
        
        if(prevNext == 'r') {
            // Es retroceso, no requiere validar formulario
            // Retroceder solo si la sección actual es mayor que uno
            next = (current > 1) ? current - 1 : current;
        } else {
            // Es avance, se debe validar formulario
            if(!formValidate(current)) {
                // Falló la validación, no ir al siguiente
                return;
            }
            // Pasar a siguiente pestaña solo si no estás en la última
            next = (current < 5) ? parseInt(current) + 1 : current;
        }
        if(next == current) {
          // Es el mismo, no es necesario hacer cambios
          return;
        }
        // Ocultar sección actual
        $('#menu' + current).removeClass('active');
        $('#menu' + current).removeClass('show');
        $('#m_menu' + current).removeClass('active');

        // Mostrar anterior o siguiente
        $('#menu' + next).addClass('active');
        $('#menu' + next).addClass('show');
        $('#m_menu' + next).addClass('active');
  }

<!-- Modal -->
  <div class="modal fade" id="modal-docente">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="titulo-modal-docente">Agregar Administrador</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- form start -->
          <form id="modal-form-add-docente">
            <div class="card-body">
              <div class="container">

                <ul class="nav nav-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" id="m_menu1">Inf. Personal</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu2">Inf. Personal</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu3">Financiera</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu4">Academica</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu5">Dirección</a>
                  </li>
                </ul> 

                <div class="tab-content">
                  <div id="menu1" class="tab-pane fade active show">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">ID / Matrícula</label>
                        <input type="text" class="form-control" id="form-usu-docente-matricula-add" name="form-usu-docente-matricula-add" placeholder="Matrícula" required>
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Nombre(s)</label>
                        <input type="text" class="form-control" id="form-usu-docente-nombre-add" name="form-usu-docente-nombre-add" placeholder="Nombre(s)">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Apellido Paterno</label>
                        <input type="text" class="form-control" id="form-usu-docente-ap-add" name="form-usu-docente-ap-add" placeholder="Apellido Paterno">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Apellido Materno</label>
                        <input type="text" class="form-control" id="form-usu-docente-am-add" name="form-usu-docente-am-add" placeholder="Apellido Materno">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">CURP</label>
                        <input type="text" class="form-control" id="form-usu-docente-curp-add" name="form-usu-docente-curp-add" placeholder="CURP">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Seguro Social</label>
                        <input type="text" class="form-control" id="form-usu-docente-ss-add" name="form-usu-docente-ss-add" placeholder="Seguro Social">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">RFC</label>
                        <input type="text" class="form-control" id="form-usu-docente-rfc-add" name="form-usu-docente-rfc-add" placeholder="RFC">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Nacionalidad</label>
                        <input type="text" class="form-control" id="form-usu-docente-nacion-add" name="form-usu-docente-nacion-add" placeholder="Nacionalidad">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">IFE</label>
                        <input type="text" class="form-control" id="form-usu-docente-ife-add" name="form-usu-docente-ife-add" placeholder="IFE">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Lugar de Nacimiento</label>
                        <input type="text" class="form-control" id="form-usu-docente-ln-add" name="form-usu-docente-ln-add" placeholder="Lugar de Nacimiento">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Fecha de Nacimiento</label>
                        <input type="text" class="form-control" id="form-usu-docente-fn-add" name="form-usu-docente-fn-add" placeholder="Fecha de Nacimiento">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Sexo</label>
                        <input type="text" class="form-control" id="form-usu-docente-sexo-add" name="form-usu-docente-sexo-add" placeholder="Sexo">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Número de Tarjeta</label>
                        <input type="text" class="form-control" id="form-usu-docente-nt-add" name="form-usu-docente-nt-add" placeholder="Número de Tarjeta">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Correo Personal</label>
                        <input type="text" class="form-control" id="form-usu-docente-mailp-add" name="form-usu-docente-mailp-add" placeholder="Correo Personal">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu1" onclick="wizard_docente(this.id)" disabled="true"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu1" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <!-- Numero 2 -->
                  <div id="menu2" class="tab-pane fade">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Estado</label>
                        <input type="text" class="form-control" id="form-usu-docente-estado-add" name="form-usu-docente-estado-add" placeholder="Estado">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Municipio</label>
                        <input type="text" class="form-control" id="form-usu-docente-municipio-add" name="form-usu-docente-municipio-add" placeholder="Municipio">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Colonia</label>
                        <input type="text" class="form-control" id="form-usu-docente-colonia-add" name="form-usu-docente-colonia-add" placeholder="Colonia">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Calle</label>
                        <input type="text" class="form-control" id="form-usu-docente-calle-add" name="form-usu-docente-calle-add" placeholder="Calle">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Número Exterior</label>
                        <input type="text" class="form-control" id="form-usu-docente-ne-add" name="form-usu-docente-ne-add" placeholder="Número Exterior">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Número Interior</label>
                        <input type="text" class="form-control" id="form-usu-docente-ni-add" name="form-usu-docente-ni-add" placeholder="Número Interior">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Teléfono</label>
                        <input type="text" class="form-control" id="form-usu-docente-telefono-add" name="form-usu-docente-telefono-add" placeholder="Teléfono">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Celular</label>
                        <input type="text" class="form-control" id="form-usu-docente-celular-add" name="form-usu-docente-celular-add" placeholder="Celular">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">C.P.</label>
                        <input type="text" class="form-control" id="form-usu-docente-cp-add" name="form-usu-docente-cp-add" placeholder="C.P.">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu2" onclick="wizard_docente(this.id)"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu2" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <!-- Numero 3 -->
                  <div id="menu3" class="tab-pane fade">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Tabulador</label>
                        <input type="text" class="form-control" id="form-usu-docente-cp-add" name="form-usu-docente-cp-add" placeholder="C.P.">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Tabulador 2</label>
                        <input type="text" class="form-control" id="form-usu-docente-municipio-add" name="form-usu-docente-municipio-add" placeholder="Municipio">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Percepción Única</label>
                        <input type="text" class="form-control" id="form-usu-docente-colonia-add" name="form-usu-docente-colonia-add" placeholder="Colonia">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Clave Bancaria</label>
                        <input type="text" class="form-control" id="form-usu-docente-calle-add" name="form-usu-docente-calle-add" placeholder="Calle">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Nombre Banco</label>
                        <input type="text" class="form-control" id="form-usu-docente-ne-add" name="form-usu-docente-ne-add" placeholder="Número Exterior">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Cuenta</label>
                        <input type="text" class="form-control" id="form-usu-docente-ni-add" name="form-usu-docente-ni-add" placeholder="Número Interior">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Actividad Primordial</label>
                        <input type="text" class="form-control" id="form-usu-docente-telefono-add" name="form-usu-docente-telefono-add" placeholder="Teléfono">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Dirección de Actividad Primordial</label>
                        <input type="text" class="form-control" id="form-usu-docente-celular-add" name="form-usu-docente-celular-add" placeholder="Celular">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Teléfono de Actividad Primordial</label>
                        <input type="text" class="form-control" id="form-usu-docente-telefono-add" name="form-usu-docente-telefono-add" placeholder="Teléfono">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu3" onclick="wizard_docente(this.id)"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu3" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <!-- Numero 4 -->
                  <div id="menu4" class="tab-pane fade">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Titulo</label>
                        <input type="text" class="form-control" id="form-usu-docente-cp-add" name="form-usu-docente-cp-add" placeholder="C.P.">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Grado</label>
                        <input type="text" class="form-control" id="form-usu-docente-municipio-add" name="form-usu-docente-municipio-add" placeholder="Municipio">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Cedula</label>
                        <input type="text" class="form-control" id="form-usu-docente-colonia-add" name="form-usu-docente-colonia-add" placeholder="Colonia">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Año de entrada</label>
                        <input type="text" class="form-control" id="form-usu-docente-calle-add" name="form-usu-docente-calle-add" placeholder="Calle">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Turno</label>
                        <input type="text" class="form-control" id="form-usu-docente-ne-add" name="form-usu-docente-ne-add" placeholder="Número Exterior">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Carrera</label>
                        <input type="text" class="form-control" id="form-usu-docente-ni-add" name="form-usu-docente-ni-add" placeholder="Número Interior">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu4" onclick="wizard_docente(this.id)"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu4" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <div id="menu5" class="tab-pane fade">
                    <h3>Menu 4</h3>
                    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu5" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.card-body -->
          
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary" id="btn-form-add-docente" name="btn-form-add-docente" value="" disabled="true">Guardar</button>
          </form>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

1 Answers

Voted

Triby · Answer 1 · 2022-01-15T10:52:47+08:00

You must validate each block before making the visibility change. I suggest you create rules beforehand for each tab, so that you can use only one function for validations.

Recommended reading:

jQuery - Validation plugin - It can validate the whole form or only what you provide in parameters
jQuery - valid() - Devuelve el resultado de la validación

let reglas = {
    '1': { rules: {
          "form-usu-docente-matricula-add": {
            required: true,
            number: true
          },
          "form-usu-docente-nombre-add": {
            required: true
          },
          "form-usu-docente-ap-add": {
            required: true
          },
          "form-usu-docente-am-add": {
            required: true
          },
          "form-usu-docente-curp-add": {
            required: true
          },
          "form-usu-docente-ss-add": {
            required: true
          },
          "form-usu-docente-rfc-add": {
            required: true
          },
          "form-usu-docente-nacion-add": {
            required: true
          },
          "form-usu-docente-ife-add": {
            required: true
          },
          "form-usu-docente-ln-add": {
            required: true
          },
          "form-usu-docente-fn-add": {
            required: true
          },
          "form-usu-docente-sexo-add": {
            required: true
          },
          "form-usu-docente-nt-add": {
            required: true,
            number: true
          },
          "form-usu-docente-mailp-add": {
            required: true,
            email: true
          }

        },
        messages: {
          "form-usu-docente-matricula-add": {
            required: "* Ingresar Matrícula"
          },
          "form-usu-docente-nombre-add": {
            required: "* Ingresar Nombre(s)"
          },
          "form-usu-docente-ap-add": {
            required: "* Ingresar Apellido Paterno"
          },
          "form-usu-docente-am-add": {
            required: "* Ingresar Apellido Materno"
          },
          "form-usu-docente-curp-add": {
            required: "* Ingresar CURP"
          },
          "form-usu-docente-ss-add": {
            required: "* Ingresar Seguro Social"
          },
          "form-usu-docente-rfc-add": {
            required: "* Ingresar RFC"
          },
          "form-usu-docente-nacion-add": {
            required: "* Ingresar Nacionalidad"
          },
          "form-usu-docente-ife-add": {
            required: "* Ingresar IFE"
          },
          "form-usu-docente-ln-add": {
            required: "* Ingresar Lugar de Nacimiento."
          },
          "form-usu-docente-fn-add": {
            required: "* Ingresar Fecha de Nacimiento"
          },
          "form-usu-docente-sexo-add": {
            required: "* Ingresar Sexo"
          },
          "form-usu-docente-nt-add": {
            required: "* Ingresar Número de Tarjeta"
          },
          "form-usu-docente-mailp-add": {
            required: "* Ingresar Correo Personal"
          }

        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }},
    '2': { rules: {
          "form-usu-docente-estado-add": {
            required: true
          },
          "form-usu-docente-municipio-add": {
            required: true
          },
          "form-usu-docente-colonia-add": {
            required: true
          },
          "form-usu-docente-calle-add": {
            required: true
          },
          "form-usu-docente-ne-add": {
            required: true
          },
          "form-usu-docente-ni-add": {
            required: true
          },
          "form-usu-docente-telefono-add": {
            required: true,
            number: true
          },
          "form-usu-docente-celular-add": {
            required: true,
            number: true
          },
          "form-usu-docente-cp-add": {
            required: true,
            number: true
          }
        },
        messages: {
          "form-usu-docente-estado-add": {
            required: "* Ingresar Estado"
          },
          "form-usu-docente-municipio-add": {
            required: "* Ingresar Municipio"
          },
          "form-usu-docente-colonia-add": {
            required: "* Ingresar Colonia"
          },
          "form-usu-docente-calle-add": {
            required: "* Ingresar Calle"
          },
          "form-usu-docente-ne-add": {
            required: "* Ingresar Número Exterior"
          },
          "form-usu-docente-ni-add": {
            required: "* Ingresar Número Interior"
          },
          "form-usu-docente-telefono-add": {
            required: "* Ingresar Teléfono"
          },
          "form-usu-docente-celular-add": {
            required: "* Ingresar Celular"
          },
          "form-usu-docente-cp-add": {
            required: "* Ingresar Código Postal"
          }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }}
  };

  function formValidate(num) {
    if(reglas[num]) {
        $('#modal-form-add-docente').validate(reglas[num]);
        // console.log($('#modal-form-add-docente').validate().settings.rules);
        let valid = $('#modal-form-add-docente').valid();
        console.log(valid);
        $('#modal-form-add-docente').validate().destroy();
        return valid;
    }
    return true;
}

  function wizard_docente(wizard){
        let [prevNext, current] = wizard.split('_menu');
        current = parseInt(current); // Forzar que sea entero
        if(current < 1 || current > 5) {
            alert('default'); // Eliminar la necesidad del switch
        }
        // Cuál es la siguiente pestaña a mostrar
        let next;
        
        if(prevNext == 'r') {
            // Es retroceso, no requiere validar formulario
            // Retroceder solo si la sección actual es mayor que uno
            next = (current > 1) ? current - 1 : current;
        } else {
            // Es avance, se debe validar formulario
            if(!formValidate(current)) {
                // Falló la validación, no ir al siguiente
                return;
            }
            // Pasar a siguiente pestaña solo si no estás en la última
            next = (current < 5) ? parseInt(current) + 1 : current;
        }
        if(next == current) {
          // Es el mismo, no es necesario hacer cambios
          return;
        }
        // Ocultar sección actual
        $('#menu' + current).removeClass('active');
        $('#menu' + current).removeClass('show');
        $('#m_menu' + current).removeClass('active');

        // Mostrar anterior o siguiente
        $('#menu' + next).addClass('active');
        $('#menu' + next).addClass('show');
        $('#m_menu' + next).addClass('active');
  }

li a.active { color:blue; }
#menu1, #menu2, #menu3, #menu4, #menu5 {
  display:none;
}
.show {
  display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<!-- Modal -->
  <div class="modal fade" id="modal-docente">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="titulo-modal-docente">Agregar Administrador</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- form start -->
          <form id="modal-form-add-docente">
            <div class="card-body">
              <div class="container">

                <ul class="nav nav-tabs">
                  <li class="nav-item">
                    <a class="nav-link active" id="m_menu1">Inf. Personal</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu2">Inf. Personal</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu3">Financiera</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu4">Academica</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="m_menu5">Dirección</a>
                  </li>
                </ul> 

                <div class="tab-content">
                  <div id="menu1" class="tab-pane fade active show">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">ID / Matrícula</label>
                        <input type="text" class="form-control" id="form-usu-docente-matricula-add" name="form-usu-docente-matricula-add" placeholder="Matrícula" required>
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Nombre(s)</label>
                        <input type="text" class="form-control" id="form-usu-docente-nombre-add" name="form-usu-docente-nombre-add" placeholder="Nombre(s)">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Apellido Paterno</label>
                        <input type="text" class="form-control" id="form-usu-docente-ap-add" name="form-usu-docente-ap-add" placeholder="Apellido Paterno">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Apellido Materno</label>
                        <input type="text" class="form-control" id="form-usu-docente-am-add" name="form-usu-docente-am-add" placeholder="Apellido Materno">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">CURP</label>
                        <input type="text" class="form-control" id="form-usu-docente-curp-add" name="form-usu-docente-curp-add" placeholder="CURP">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Seguro Social</label>
                        <input type="text" class="form-control" id="form-usu-docente-ss-add" name="form-usu-docente-ss-add" placeholder="Seguro Social">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">RFC</label>
                        <input type="text" class="form-control" id="form-usu-docente-rfc-add" name="form-usu-docente-rfc-add" placeholder="RFC">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Nacionalidad</label>
                        <input type="text" class="form-control" id="form-usu-docente-nacion-add" name="form-usu-docente-nacion-add" placeholder="Nacionalidad">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">IFE</label>
                        <input type="text" class="form-control" id="form-usu-docente-ife-add" name="form-usu-docente-ife-add" placeholder="IFE">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Lugar de Nacimiento</label>
                        <input type="text" class="form-control" id="form-usu-docente-ln-add" name="form-usu-docente-ln-add" placeholder="Lugar de Nacimiento">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Fecha de Nacimiento</label>
                        <input type="text" class="form-control" id="form-usu-docente-fn-add" name="form-usu-docente-fn-add" placeholder="Fecha de Nacimiento">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Sexo</label>
                        <input type="text" class="form-control" id="form-usu-docente-sexo-add" name="form-usu-docente-sexo-add" placeholder="Sexo">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Número de Tarjeta</label>
                        <input type="text" class="form-control" id="form-usu-docente-nt-add" name="form-usu-docente-nt-add" placeholder="Número de Tarjeta">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Correo Personal</label>
                        <input type="text" class="form-control" id="form-usu-docente-mailp-add" name="form-usu-docente-mailp-add" placeholder="Correo Personal">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu1" onclick="wizard_docente(this.id)" disabled="true"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu1" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <!-- Numero 2 -->
                  <div id="menu2" class="tab-pane fade">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Estado</label>
                        <input type="text" class="form-control" id="form-usu-docente-estado-add" name="form-usu-docente-estado-add" placeholder="Estado">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Municipio</label>
                        <input type="text" class="form-control" id="form-usu-docente-municipio-add" name="form-usu-docente-municipio-add" placeholder="Municipio">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Colonia</label>
                        <input type="text" class="form-control" id="form-usu-docente-colonia-add" name="form-usu-docente-colonia-add" placeholder="Colonia">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Calle</label>
                        <input type="text" class="form-control" id="form-usu-docente-calle-add" name="form-usu-docente-calle-add" placeholder="Calle">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Número Exterior</label>
                        <input type="text" class="form-control" id="form-usu-docente-ne-add" name="form-usu-docente-ne-add" placeholder="Número Exterior">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Número Interior</label>
                        <input type="text" class="form-control" id="form-usu-docente-ni-add" name="form-usu-docente-ni-add" placeholder="Número Interior">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Teléfono</label>
                        <input type="text" class="form-control" id="form-usu-docente-telefono-add" name="form-usu-docente-telefono-add" placeholder="Teléfono">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Celular</label>
                        <input type="text" class="form-control" id="form-usu-docente-celular-add" name="form-usu-docente-celular-add" placeholder="Celular">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">C.P.</label>
                        <input type="text" class="form-control" id="form-usu-docente-cp-add" name="form-usu-docente-cp-add" placeholder="C.P.">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu2" onclick="wizard_docente(this.id)"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu2" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <!-- Numero 3 -->
                  <div id="menu3" class="tab-pane fade">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Tabulador</label>
                        <input type="text" class="form-control" id="form-usu-docente-cp-add" name="form-usu-docente-cp-add" placeholder="C.P.">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Tabulador 2</label>
                        <input type="text" class="form-control" id="form-usu-docente-municipio-add" name="form-usu-docente-municipio-add" placeholder="Municipio">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Percepción Única</label>
                        <input type="text" class="form-control" id="form-usu-docente-colonia-add" name="form-usu-docente-colonia-add" placeholder="Colonia">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Clave Bancaria</label>
                        <input type="text" class="form-control" id="form-usu-docente-calle-add" name="form-usu-docente-calle-add" placeholder="Calle">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Nombre Banco</label>
                        <input type="text" class="form-control" id="form-usu-docente-ne-add" name="form-usu-docente-ne-add" placeholder="Número Exterior">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Cuenta</label>
                        <input type="text" class="form-control" id="form-usu-docente-ni-add" name="form-usu-docente-ni-add" placeholder="Número Interior">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Actividad Primordial</label>
                        <input type="text" class="form-control" id="form-usu-docente-telefono-add" name="form-usu-docente-telefono-add" placeholder="Teléfono">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Dirección de Actividad Primordial</label>
                        <input type="text" class="form-control" id="form-usu-docente-celular-add" name="form-usu-docente-celular-add" placeholder="Celular">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Teléfono de Actividad Primordial</label>
                        <input type="text" class="form-control" id="form-usu-docente-telefono-add" name="form-usu-docente-telefono-add" placeholder="Teléfono">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu3" onclick="wizard_docente(this.id)"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu3" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <!-- Numero 4 -->
                  <div id="menu4" class="tab-pane fade">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Titulo</label>
                        <input type="text" class="form-control" id="form-usu-docente-cp-add" name="form-usu-docente-cp-add" placeholder="C.P.">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Grado</label>
                        <input type="text" class="form-control" id="form-usu-docente-municipio-add" name="form-usu-docente-municipio-add" placeholder="Municipio">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Cedula</label>
                        <input type="text" class="form-control" id="form-usu-docente-colonia-add" name="form-usu-docente-colonia-add" placeholder="Colonia">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Año de entrada</label>
                        <input type="text" class="form-control" id="form-usu-docente-calle-add" name="form-usu-docente-calle-add" placeholder="Calle">
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">Turno</label>
                        <input type="text" class="form-control" id="form-usu-docente-ne-add" name="form-usu-docente-ne-add" placeholder="Número Exterior">
                      </div>
                      <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">Carrera</label>
                        <input type="text" class="form-control" id="form-usu-docente-ni-add" name="form-usu-docente-ni-add" placeholder="Número Interior">
                      </div>
                    </div>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu4" onclick="wizard_docente(this.id)"/>
                          <input type="button" name="Siguiente" value="Siguiente" class="btn btn-block btn-primary" id="s_menu4" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                  <div id="menu5" class="tab-pane fade">
                    <h3>Menu 4</h3>
                    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                    <div class="form-row justify-content-end">
                      <div class="form-group col-md-6">
                          <input type="button" name="Regresar" value="Regresar" class="btn btn-block btn-primary" id="r_menu5" onclick="wizard_docente(this.id)"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.card-body -->
          
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary" id="btn-form-add-docente" name="btn-form-add-docente" value="" disabled="true">Guardar</button>
          </form>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

Validate the form of each wizard tab by clicking the next button

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?