4

Estoy realizando una aplicación web con un wizard de bootstrap la primera pantalla tiene un formulario que valido con jquery-validate, en la segunda sección del wizard tengo un input y un botón que generan una tabla según el numero de filas que ingrese el usuario dentro del input, el problema viene después de generar la tabla ya que al pasar a la sección 3 de mi wizard, no me permite ya que me genera un error, identificando el error a través del google chrome es cuando verifico si es valido mi form con $("#commentForm").valid(), pero no se ¿Por que?

$(document).ready(function() {
  $('#fecharecepcion').datetimepicker({
    locale: 'es',
    format: "dd/MM/YYYY"
  });

  $('#fechaenvio').datetimepicker({
    locale: 'es',
    format: "dd/MM/YYYY"
  });

  $.extend(jQuery.validator.messages, {
    required: "Este campo es obligatorio.",
    remote: "Por favor, rellena este campo.",
    email: "Por favor, escribe una dirección de correo válida",
    url: "Por favor, escribe una URL válida.",
    date: "Por favor, escribe una fecha válida.",
    dateISO: "Por favor, escribe una fecha (ISO) válida.",
    number: "Por favor, escribe un número entero válido.",
    digits: "Por favor, escribe sólo dígitos.",
    creditcard: "Por favor, escribe un número de tarjeta válido.",
    equalTo: "Por favor, escribe el mismo valor de nuevo.",
    accept: "Por favor, escribe un valor con una extensión aceptada.",
    maxlength: jQuery.validator.format("Por favor, no escribas más de {0} caracteres."),
    minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
    rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
    range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
    max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
    min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
  });


  var $validator = $("#commentForm").validate({
    rules: {
      factura: {
        required: true
      },
      nombre: {
        required: true,
        minlength: 3
      },
      apellidoA: {
        required: true
      },
      apellidoM: {
        required: true
      },
      fecharecepcion: {
        required: true
      },
      fechaenvio: {
        required: true
      },
      emailfield: {
        required: true,
        email: true,
        minlength: 3
      }
    }
  });

  $('#rootwizard').bootstrapWizard({
    'tabClass': 'nav nav-pills',
    'onNext': function(tab, navigation, index) {
      var $valid = $("#commentForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    }
  });



  $("#btnGenerafilas").click(function() {


    //Iniciamos esta linea para que el Jquery no tenga conflicto con otras librerias que tengas
    jQuery.noConflict();
    jQuery("#generaTabla").hide().fadeIn("Slow");
    //Capturamos el Numero de filas en la variable
    var NroFila = document.getElementById("txtNroFila").value;
    var Cantidad = NroFila * NroFila + 1;
    var valor = Cantidad * 1300;

    //removemos las filas que pueda tener la tabla
    jQuery('#tblTabla tr').next().remove();
    var a = 0;
    //Recorremos el NroFila y vamos creando las filas
    for (var x = 0; x < NroFila; x++) {
      Cantidad = Cantidad + x;
      valor = valor * Cantidad;
      a = a + 1;
      jQuery('#tblTabla tr:last').after('<tr>' +
        '<td align="left">' + a + '</td>' +
        '<td align="left">' + Cantidad + '</td>' +
        '<td align="left">' + valor + '</td></tr>');
    }
    //Colocamos algo de extra para colorear las filas :P
    jQuery('#tblTabla tr:odd').css('background-color', '#E9F0F8');
  });

});
<form id="commentForm" method="get" action="#" class="form-horizontal">
  <div id="rootwizard">
    <ul>
      <li><a href="#tab1" data-toggle="tab" id="tabUno">1. Datos</a>
      </li>
      <li><a href="#tab2" data-toggle="tab" id="tabDos">2. Articulos</a>
      </li>
      <li><a href="#tab3" data-toggle="tab" id="tabTres">3. Series</a>
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="tab1">
        <!-- INICIA TAB1 -->
        <h5><span class="glyphicon glyphicon-th"></span>Ingrese los datos solicitados</h5>
        <div class="form-group">
          <label class="col-lg-3 control-label">Factura</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" id="factura" name="factura" />
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-3 control-label">Nombre</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" id="nombre" name="nombre" />
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-3 control-label">Apellido Paterno</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" id="apellidoA" name="apellidoA" />
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-3 control-label">Apellido Materno</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" id="apellidoM" name="apellidoM" />
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-3 control-label">Fecha recepción</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" name="fecharecepcion" id="fecharecepcion" data-date-format="YYYY-MM-DD" />
          </div>
        </div>

        <div class="form-group">
          <label class="col-lg-3 control-label">Fecha envio</label>
          <div class="col-lg-3">
            <input type="text" class="form-control" name="fechaenvio" id="fechaenvio" data-date-format="YYYY-MM-DD" />
          </div>
        </div>
      </div>
      <!-- FIN TAB1 -->

      <div class="tab-pane" id="tab2">
        <!-- INICIA TAB2 -->
        <h5><span class="glyphicon glyphicon-th"></span>Ingrese</h5>
        <div id="ingresaFilas">
          <div class="form-group">
            <label class="col-lg-3 control-label">Ingrese</label>
            <div class="col-lg-3">
              <input type="text" class="form-control" id="txtNroFila" name="txtNroFila" />
              <button id="btnGenerafilas" class="btn btn-success" type="button">Generar</button>
            </div>
          </div>
        </div>

        <div id="generaTabla" style="display: none">
          <table cellspacing="0" cellpadding="4" border="0" id="tblTabla" style="color: #333333; width: 100%; border-collapse: collapse;">
            <tr style="color: White; background-color: #5D7B9D; font-weight: bold;">
              <th align="left">Nro
              </th>
              <th align="left">Cantidad
              </th>
              <th align="left" scope="col">Valor
              </th>
            </tr>
          </table>
        </div>

      </div>
      <!-- FIN TAB2 -->

      <div class="tab-pane" id="tab3">
        <!-- INICIA TAB3 -->
        3
      </div>
      <!-- FIN TAB3 -->
      <ul class="pager wizard">
        <li class="next"><a href="#">Siguiente</a>
        </li>
      </ul>
    </div>
  </div>
</form>

formulario

genera tabla

Error

2 respuestas 2

2

agregue var $ = jQuery; antes de la linea que me genera error

Fuente: https://forum.jquery.com/topic/typeerror-valid-is-not-a-function-not-working-after-upgrading-to-jquery-1-10-2

1
  • Por favor alguien que la agregue como respuesta por que yo ya no puedo hasta dentro de 2 días...
    – Ivxn
    el 8 jun. 2016 a las 19:20
0

Creo que tiene incorrecto el $('#fecharecepcion') el input no tiene ese ID, y sucede lo mismo con $('#fechaenvio')

Tu Respuesta

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

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