Tengo un formulario donde divido los campos en diferentes tabs, y lo estoy validando con jquery.validate pero al momento de la validación al parecer sólo está tomando los input que se encuentran visibles, es decir los que se muestran en el tab activo.
Mi formulario luce de la siguiente forma:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<form class="form-horizontal" submit.delegate="save()">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal</a>
</li>
<li role="presentation">
<a href="#ubicacion" aria-controls="ubicacion" role="tab" data-toggle="tab">Ubicación</a>
</li>
<li role="presentation">
<a href="#contacto" aria-controls="contacto" role="tab" data-toggle="tab">Contacto</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="personal">
<div class="form-group">
<label for="PrimerNombre" class="control-label col-xs-3">Primer Nombre</label>
<div class="col-xs-9">
<input required type="text" class="form-control" value.bind="currentItem.PrimerNombre" name="PrimerNombre">
</div>
</div>
<!--- ... -->
</div>
<div role="tabpanel" class="tab-pane" id="ubicacion">
<div class="form-group">
<label for="Direccion" class="control-label col-xs-3">Dirección</label>
<div class="col-xs-9">
<input maxlength="200" type="text" class="form-control" value.bind="currentItem.Direccion" name="Direccion">
</div>
</div>
<!--- ... -->
</div>
<div role="tabpanel" class="tab-pane" id="contacto">
<div class="form-group">
<label for="Celular" class="control-label col-xs-3">Celular</label>
<div class="col-xs-9">
<input required maxlength="10" type="text" class="form-control" value.bind="currentItem.Celular" name="Celular">
</div>
</div>
<!--- ... -->
</div>
</div>
</form>
La validación se dispara a la hora de enviar los datos del formulario así:
save() {
if ($("form").validate().form()) {
//Código Guardado
}
}
Nota
Estoy usando aurelia.io
para bindar los campos y el modelo que está en TypeScript
pero no creo que esto afecte en algo la funcionalidad del plugin de validación.