I'm doing a web application with a bootstrap wizard the first screen has a form that is valid with jquery-validate, in the second section of the wizard I have an input and a button that generate a table according to the number of rows that the user within the input, the problem comes after generating the table because when I go to section 3 of my wizard, it does not allow me to generate an error, identifying the error through google chrome is when I check if my form with $ ("# commentForm"). valid (), but I do not know Why?
$(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> 
