<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>
<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>
Estoy usando aurelia.ioaurelia.io
para bindar los campos y el modelo que está en TypeScriptTypeScript
pero no creo que esto afecte en algo la funcionalidad del pluginplugin de validación.